Ajax and radio buttons

[ecopetition]

Hello,

 

I'm needing some help with the following HTML, it's a simple voting script:

<form name="vote_form" action="">
<input type="radio" name="vote_radio" id="vote_radio" value="1"/>Option 1<br/>
<input type="radio" name="vote_radio" id="vote_radio" value="2"/>Option 2<br/>
<input type="radio" name="vote_radio" id="vote_radio" value="3"/>Option 3<br/>
<div class="error">You must select an option to vote for.</div>
    <input type="submit" name="submit" class="submit" id="submit" value="submit" />
</form>

 

I'm looking to submit the script using Ajax (and jQuery), and am looking to use the following code:

<script>
    $(function() {  
  $('.error').hide();
      $(".submit").click(function() {
            if (!$("input[@name='name']:checked").val()) {
			$('.error').show();
			return false;
		}
		var vote_radio = ????;
	    var dataString = 'vote='+ vote_radio;
		$.ajax({
		  type: "POST",
		  url: "index.php",
		  data: dataString,
		  success: function() {
		 	       alert ('Done.');
			});
		  }
		});
		return false;
      });
    });
</script>

 

It goes without saying that this script doesn't work.  What I can't figure out is how to define the radio button that's been selected (vote_radio), so the dataString fails.

 

Can anyone help?

 

Thanks a lot.

[spiderwell]

i think its

 

var vote_radio  =  $("input#vote_radio").val();

[ecopetition]

Thanks, it looks more promising, but it produces a value of 1 for every radio option?

[spiderwell]

try this one then:

 

$('input:radio[name=vote_radio]:checked').val();

 

[AyKay47]

try this one then:

 

$('input:radio[name=vote_radio]:checked').val();

 

that or $('input:[name=vote_radio]:checked').val(); will work,

 

I notice one major flaw in your code, you have multiple id's with the same name, which is the reason that you were receiving the value of one repetitively with the first suggested code. Id's should always be unique, as if they are not this defeats the purpose of an id and a class should be used instead. If multiples of the same id are present, when attempting to select them with a jquery selector, it will only select the first element in the group. This rule applies for CSS as well.

[ecopetition]

Thanks all.

 

Now, I have a final question.  I'm a newbie with Ajax, so I'm wondering, what code do I need in index.php that starts the processing of the form data?

 

Thank you again

[AyKay47]

the first step would be checking for the POST values sent via ajax through the query string being set using isset. Once you are sure the values are present, you can begin writing the necessary validation and handling code.

[ecopetition]

I must admit that I'm completely lost.

 

Why doesn't this work (in index.php):

if(isset($_POST['submit']))
{
$vote_id = htmlspecialchars($_POST['vote']);
register_vote($vote_id);
}

 

Thank you

[AyKay47]

depends, you will be able to grab an $_POST values that are being sent from the ajax data: property. Say this is your ajax request:

 

$.ajax({
 type: "POST",
         url: "index.php",
         data:test=1&variable=2,
 success: function() {
	alert ("success");
 }
});

 

to grab this data in "index.php" it would loo like this.

 

if(isset($_POST['test'], $_POST['variable']))
{
    //variables are set, proceed with code
}

[ecopetition]

Could you help me with why this script doesn't work:

 

jQuery:

 $(function() {  
  $('.error').hide();
  $('.failure').hide();
  $('.success').hide();
      $(".submit").click(function() {
            if (!$("input[@name='name']:checked").val()) {
			$('.error').show();
			return false;
		}
		var vote_radio = $("input.vote_radio").val();
	    var dataString = 'vote='+ vote_radio;
		$.ajax({
		  type: "POST",
		  url: "index.php",
		  data: dataString,
		  success: function() {
			$('.success').show();				
			$('.failure').hide();				
		  },
		  error: function() {
			$('.failure').show();				
			$('.success').hide();				
		  }
		});
		return false;
      });
    });

 

PHP:

if(isset($_POST['vote']))
{
$vote_id = htmlspecialchars($_POST['vote']);

$insert_sql = $db->build_query('INSERT', array(
		'game_id'					=>	$game_id,
		'vote_for'					=>	$vote_id,
		'ip_address'				=>	$_SERVER['SERVER_ADDR'],
		'time'					=>	time()
));
$sql = "INSERT INTO votes $insert_sql";
$db->query($sql);
}

 

Thanks again

[AyKay47]

Well, there are a few things to check for before pinpointing what is causing this.

 

1. Make sure that an Ajax request is even being sent. Is your success function being executed?

 

2. Make sure that var dataString is what you expect, output it to the browser.

 

3. If you are sure that an Ajax request is being sent, make sure error_reporting() is set to E_ALL and let us know if you are receceiving any back end errors.

 

You telling us "this code doesn't work, help me fix it" number one isn't very friendly, and two doesn't help us help you. Tell us what errors you are receiving if any, what happens exactly when the script is ran?

[ecopetition]

Well that's the thing, I'm not receiving any errors, my success function runs, but the PHP doesn't.

 

I don't see where I've gone wrong, I posted my code in the hope you can help out.

[AyKay47]

Well that's the thing, I'm not receiving any errors, my success function runs, but the PHP doesn't.

 

I don't see where I've gone wrong, I posted my code in the hope you can help out.

 

Well, you telling me that your success functions runs means that the Ajax request is sent successfully, so I won't worry about the JavaScript for now. Debugging measures should be in place in your code, never expect your code to simply work. Take measures so that if something goes wrong, you will know exactly where.

 

if(isset($_POST['vote']))
{
        echo $vote;
        exit;
$vote_id = htmlspecialchars($_POST['vote']);

$insert_sql = $db->build_query('INSERT', array(
		'game_id'					=>	$game_id,
		'vote_for'					=>	$vote_id,
		'ip_address'				=>	$_SERVER['SERVER_ADDR'],
		'time'					=>	time()
));
$sql = "INSERT INTO votes $insert_sql";
$db->query($sql);
}

 

In your ajax, have the success function alert the data being sent from the server. The first step is to make sure that $vote is what you expect. If $vote is what you expect, the next step would be to check your build_query() method for internal errors, and debug that.