Get Radio Button value with jquery/Ajax

Question

I have these radio buttons.

<input type="radio" id="flip" name="flip" value="Head" checked="checked" /> Head
<input type="radio" id="flip" name="flip" value="Tail"  /> Tail

I am trying to process a form with ajax for which I tried to get the value of these radio buttons with this

var dataString = {
    flip: $("#flip").val()
};
console.log(dataString.flip);

Now when I do console.log to check the value its sending I am always getting Head and not Tail even if I select Tail as a choice. Can anyone help me as why is it so?

id="flip" => class="flip" -- $("#flip") => $(".flip") — Funk Forty Niner
– Funk Forty Niner, Commented Apr 3, 2017 at 15:30
ID's Must Be Unique, specifically because it will cause problems in JavaScript and CSS when you try to interact with those elements. — Jay Blanchard
– Jay Blanchard, Commented Apr 3, 2017 at 15:35

Abanoub Makram · Accepted Answer · 2017-04-03 15:33:11Z

3

get value by name not id :

$("input[name='flip']:checked").val();

answered Apr 3, 2017 at 15:33

Abanoub Makram

4612 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

brk · Accepted Answer · 2017-04-03 15:32:17Z

2

id cannot be duplicate. It need to be unique.In this case you can use name attribute

Use name to select get the selected radio button value

$("input:radio[name=flip]:checked").val();

answered Apr 3, 2017 at 15:32

brk

50.3k10 gold badges59 silver badges85 bronze badges

1 Comment

user6224087 Over a year ago

It should be this I guess.. This gave me result not your's.. please check $("input[name='flip']:checked").val();

Luke · Accepted Answer · 2017-04-03 15:30:34Z

0

you cannot have the same ID multiple times! that is the reaon why it only displays one of the two.

answered Apr 3, 2017 at 15:30

Luke

8,4173 gold badges24 silver badges36 bronze badges

2 Comments

user6224087 Over a year ago

then what is the solution to this?

evolutionxbox Over a year ago

Use an attribute selector instead [name="flip"].

Sudipto · Accepted Answer · 2017-04-03 15:31:20Z

0

ID #flip is an unique element(you cannot have more than more #flip element). Use .flip instead of #flip.

And also change id="flip" to class="flip"

edited Apr 3, 2017 at 15:31

answered Apr 3, 2017 at 15:30

Sudipto

4402 silver badges8 bronze badges

Collectives™ on Stack Overflow

Get Radio Button value with jquery/Ajax

4 Answers 4

Comments

1 Comment

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related