Question

my form

<form action="" method="post">

<p>Shirt 1 : <input type="radio" name="myradio" id="myradio" value="0"/></p>
<p>Shirt 2 : <input type="radio" name="myradio" id="myradio"  value="1"/></p>


<input type="button" name="submit" id="submit" value="create" onclick="createImage()" />

</form>

my javascript:

function createImage(){

     $.ajax({


        type: "POST",
        url: "output.php",
        data:   "myradio=" + document.getElementById("myradio").value,
        success: function(html){
            $("#output").html(html);
        }   


     });
}

for $_POST['myradio'] I’m only getting the value of 0 even if I click the 2nd radio button. Do I need to give the radio buttons different id’s?

Answer 1

use :checked selector. This will give you the checked radio button. Also, IDs should be unique in a page. My example here uses class myradio.

data:   "myradio=" + $(".myradio:checked").val(),

---

another elegant way is to use .serialize(). This will give you the string param for submission.

in your example, if we use .serialize(), we can get something like myradio=0 if myradio with a value of zero is checked.

sample code, try it here

$(function(){
    $(':button').click(function() {
        alert($('form').serialize());
        return false;
    });
});
​