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, Apr 03 '17 at 15:30
[ID's Must Be Unique](http://stackoverflow.com/questions/5611963/can-multiple-different-html-elements-have-the-same-id-if-theyre-different-eleme), specifically because it will cause problems in [JavaScript](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id) and CSS when you try to interact with those elements. — Jay Blanchard, Apr 03 '17 at 15:35

score 3 · Accepted Answer · answered Apr 03 '17 at 15:33

3

get value by name not id :

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

answered Apr 03 '17 at 15:33

Abanoub Makram

463
2
13

score 2 · Answer 2 · answered Apr 03 '17 at 15:32

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 03 '17 at 15:32

brk

48,835
10
56
78

It should be this I guess.. This gave me result not your's.. please check `$("input[name='flip']:checked").val();` – Apr 03 '17 at 15:37

score 0 · Answer 3 · answered Apr 03 '17 at 15:30

0

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

answered Apr 03 '17 at 15:30

Luke

8,235
3
22
36

then what is the solution to this? – Apr 03 '17 at 15:30
Use an attribute selector instead `[name="flip"]`. – evolutionxbox Apr 03 '17 at 15:39

Sudipto · Answer 4 · 2017-04-03T15:31:20.333

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 03 '17 at 15:31

answered Apr 03 '17 at 15:30

Sudipto

440
2
8

Get Radio Button value with jquery/Ajax

4 Answers4