CODEWITHSUNDEEP
jquery
Adam
Adam

Reputation: 9049

I cannot get the different values from radio buttons using jquery ajax

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?

Upvotes: 2

Views: 1701

Answers (2)

Reigel Gallarde
Reigel Gallarde

Reputation: 65264

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;
    });
});
​

Upvotes: 3

Randall Kwiatkowski
Randall Kwiatkowski

Reputation: 895

Try this: 

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

instead of this:

document.getElementById("myradio").value;

Upvotes: 2

Related Questions