jQuery val( ) retrieving incorrect values from multiple radio button name sets

Question

I'm using jQuery .val() to pull data results out of a form that contains two sets of radio buttons.

<!DOCTYPE HTML>
<html>
    <head>  

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>

    <script type="text/javascript">

    function userPrefsSubmitted() {
    console.log(  $('form input[@name=cssOn]:checked').val()   );
    console.log(  $('form input[@name=halfFramesOn]:checked').val()   );
    }   
    </script>

</head>
<body>  
<p>Choose User Prefs</p>
<form>
    <p>Transitions</p>
    <div><input type="radio" name="cssOn" value=true>True</div>
    <div><input type="radio" name="cssOn" value=false>False</div>
    <p>Half Frames</p>  
    <div><input type="radio" name="halfFramesOn" value=true>True</div>
    <div><input type="radio" name="halfFramesOn" value=false>False</div>
    <br/><br/>
    <input class="submitButton" type="button" onClick="userPrefsSubmitted()" value="tap when done" />
</form> 

</body>
</html>

If I choose fasle then true and hit the button the console.log shows false false

This is driving me nuts and I've search this forum as well as interwebs but not found an answer. Where am I going wrong?

@Andrew: put it as an answer ;-) – zerkms Aug 01 '12 at 03:45 — zerkms, Aug 01 '12 at 03:45

thecodeparadox · Accepted Answer · 2012-08-01T03:52:51.587

9

Without @. you can do it easily:

function userPrefsSubmitted() {
  console.log(  $('form input[name=cssOn]:checked').val()   );
  console.log(  $('form input[name=halfFramesOn]:checked').val()   );
}

edited Aug 01 '12 at 03:52

answered Aug 01 '12 at 03:45

thecodeparadox

86,271
21
138
164

Tats_innit · Answer 2 · 2012-08-01T04:06:53.713

2

OR try this: working demo http://jsfiddle.net/4T5r3/

Note: http://www.electrictoolbox.com/at-name-selector-removed-jquery/

The use of these selectors without the @ also works in the jQuery 1.2 branch. I am not sure if it works in older versions.

code

function userPrefsSubmitted() {
    alert($('form input[@name=cssOn]:checked').prop('value'));
    alert($('form input[@name=halfFramesOn]:checked').prop('value'));
}

J 1.2 >

  function userPrefsSubmitted() {
        alert($('form input[name=cssOn]:checked').prop('value'));
        alert($('form input[name=halfFramesOn]:checked').prop('value'));
    }

working image When true selecte

enter image description here working image When false selected

enter image description here

edited Aug 01 '12 at 04:06

answered Aug 01 '12 at 03:48

Tats_innit

33,991
10
71
77

@thecodeparadox thanks bruv! you back in rocking mode again `:P` – Tats_innit Aug 01 '12 at 03:50
This doesn't work...same problem as in the question. The '@' makes the attribute-equals-selector fail, so it will always alert the value of the first radio button. In your demo try choosing 'true', 'false' -- it still alerts 'true', 'true'. – nbrooks Aug 01 '12 at 03:52
@nbrooks are you sure man try this: http://jsfiddle.net/4T5r3/ select the radio button and then click the button, working finr here lion osx and tried on windows as well {chrome - browser} i.e. when selected `true` it returns `true` and when selected `false` it alerts `false` – Tats_innit Aug 01 '12 at 03:53
yeah tried it, doesn't work in chrome or ff. Try selecting different options for the radio buttons (one true, one false) – nbrooks Aug 01 '12 at 03:55
@nbrooks real wow wait `:)` I will update my post with images man, can anyone else please test as well. gimme 2 bruv! – Tats_innit Aug 01 '12 at 03:56
Not sure on this, but .prop() may be reading the initial value of the property into memory on load and not updating it after the click. – brandwaffle Aug 01 '12 at 03:58
@nbrooks yo yo bruv - checkout the images in my post. `:)` – Tats_innit Aug 01 '12 at 03:58
1

The values don't have to be the same though. If you select 'true' in the first radio group, and 'false' in the second radio group, your alerts should show "true" then "false". This shows "true" then "true". It's easy to see the error if you make the values different http://jsfiddle.net/4T5r3/1/ (it alerts the first value twice) – nbrooks Aug 01 '12 at 04:01
1

@nbrooks aaa got you phew `:P` The use of these selectors without the @ also works in the jQuery 1.2 branch. I am not sure if it works in older versions. http://www.electrictoolbox.com/at-name-selector-removed-jquery/ thanks man – Tats_innit Aug 01 '12 at 04:06
@nbrooks thanks a lot bruvenor lemme return your awesomeness in next question you answer +1 `:)` – Tats_innit Aug 01 '12 at 04:11

score 1 · Answer 3 · answered Aug 01 '12 at 03:46

1

function userPrefsSubmitted() {
console.log(  $('form input[name=cssOn]:checked').val()   );
console.log(  $('form input[name=halfFramesOn]:checked').val()   );
}

answered Aug 01 '12 at 03:46

Jonathan de M.

9,721
8
47
72

score 0 · Answer 4 · edited Aug 01 '12 at 03:52

0

Also please try $(":checked").val()

instead of

$('form input[@name=halfFramesOn]:checked').val()

This will simply return all checked radio buttons.

edited Aug 01 '12 at 03:52

COLD TOLD

13,513
3
35
52

answered Aug 01 '12 at 03:47

Lexman

23
2

jQuery val( ) retrieving incorrect values from multiple radio button name sets

4 Answers4