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
– zerkms

2012-08-01 03:45:58 +00:00
Commented Aug 1, 2012 at 3:45 — zerkms
– zerkms, Commented Aug 1, 2012 at 3:45

thecodeparadox · Accepted Answer · 2012-08-01 03:52:51Z

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 1, 2012 at 3:52

answered Aug 1, 2012 at 3:45

thecodeparadox

87.2k22 gold badges143 silver badges164 bronze badges

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

Comments

Tats_innit · Accepted Answer · 2012-08-01 04:06:53Z

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 1, 2012 at 4:06

answered Aug 1, 2012 at 3:48

Tats_innit

34.1k10 gold badges74 silver badges77 bronze badges

10 Comments

Tats_innit Over a year ago

@thecodeparadox thanks bruv! you back in rocking mode again :P

nbrooks Over a year ago

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'.

Tats_innit Over a year ago

@nbrooks are you sure man try this: 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

nbrooks Over a year ago

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 jsfiddle.net/4T5r3/1 (it alerts the first value twice)

Tats_innit Over a year ago

@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. electrictoolbox.com/at-name-selector-removed-jquery thanks man

|

Jonathan de M. · Accepted Answer · 2012-08-01 03:46:52Z

1

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

answered Aug 1, 2012 at 3:46

Jonathan de M.

9,8488 gold badges50 silver badges72 bronze badges

Comments

COLD TOLD · Accepted Answer · 2012-08-01 03:52:18Z

0

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

instead of

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

This will simply return all checked radio buttons.

edited Aug 1, 2012 at 3:52

COLD TOLD

13.6k3 gold badges37 silver badges53 bronze badges

answered Aug 1, 2012 at 3:47

Lexman

232 bronze badges

Collectives™ on Stack Overflow

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

4 Answers 4

Comments

10 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

10 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related