jQuery post when click on radio button

Question

I have problem about jQuery post in radio button. I can't save radio button value when I click radio button using jQuery AJAX post

Here's my form:

<?php
  $jaw = mysql_query("SELECT * FROM jwb");
  $j=mysql_fetch_array($jaw);
?>
<div id="id_jwb"><?php echo $j['id_jwb'];?></div><?php echo $j['jwb'];?><br>
<input type="radio" name="jwb1" value="A" id="jwb1" <?php if($j['jwb']=='A'){echo 'checked';}?>>A<br>
<input type="radio" name="jwb1" value="B" id="jwb1" <?php if($j['jwb']=='B'){echo 'checked';}?>>B<br>
<input type="radio" name="jwb1" value="C" id="jwb1" <?php if($j['jwb']=='C'){echo 'checked';}?>>C<br>

And here's my jQuery post:

$("#jwb1").click(function(){
                var jawaban = $("input[name=jwb1]:checked").val();
                var id_jawaban = $("#id_jwb").html();
                $.post('update_jwb.php',{ jwb: jawaban, id_jwb: id_jawaban });
});

And here's my php file to insert db:

$con = mysql_connect($host, $username, $password);
mysql_select_db($database, $con);

$jwb = $_POST['jwb']; // $_POST['jwb'] dari jQuery-post
$id = $_POST['id_jwb'];

$sql = "UPDATE jwb SET jwb='{$jwb}' WHERE id_jwb='$id'";
$query = mysql_query($sql, $con);
if($query){
    echo 'sukses';
}
else{
    echo 'gagal';
}

Answer 1

The problem is with your html/jQuery. You are trying to use the id of the radio button however all three radio buttons have the same id value so the browser doesn't know which value you want it to grab. You can fix this by using the following jQuery which uses input name instead of the id and only gets the value of the radio button that is checked.:

$("input[name=jwb1]").click(function(){
    var jawaban = $("input[name=jwb1]:checked").val();
    var id_jawaban = $("input[name=jwb1]:checked").html();
    $.post('update_jwb.php',{ jwb: jawaban, id_jwb: id_jawaban });
});

Also I just noticed that these inputs don't have any inner HTML therefore...

$("input[name=jwb1]:checked").html()

...won't return anything so the "id_jwb" post value will always be empty. That means you can pretty much get rid of this post value.

If you want to submit a value AND id of the radio button that is selected then you would need to make every radio button have a unique id. Then use the following jQuery:

$("input[name=jwb1]").click(function(){
    var jawaban = $("input[name=jwb1]:checked").val();
    var id_jawaban = $("input[name=jwb1]:checked").attr("id");
    $.post('update_jwb.php',{ jwb: jawaban, id_jwb: id_jawaban });
});

Answer 2

Each id value must be used only once within a document. If more than one element has been assigned the same ID, queries that use that ID will only select the first matched element in the DOM. This behavior should not be relied on, however; a document with more than one element using the same ID is invalid.

Hence I suggest you to use class with input tag and use class selector for attaching a click event.