CODEWITHSUNDEEP
jqueryradio-button
SatansFate
SatansFate

Reputation: 47

jQuery returning wrong selected radiobox?

I have a form input consisting of two radiobuttons, for one name, as below:

<label for="thumb">[thumb]</label> 
<input type="radio" name="type" value="thumb" checked />
<label for="img">[img]</label><input type="radio" name="type" value="img" />

Within a jQuery function I reference which one is checked as such:

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

For some reason, even if I have changed the checked box on the page, if always returns the former.

Here's the full code, for purposes of elimination:

<html>
<head>
<title>Thumb/img BBCode generator</title>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js'></script>
<meta http-equiv="Content-Style-Type" content="text/css" />
<link href="style.css" rel="stylesheet" type="text/css" />
<noscript>Please enable Javascript or use the <a href='index2.php'>old generator</a></noscript>
</head>
<body>
<h2>Thumb/img BBCode generator for Facepunch</h2>
<div id="content">
<form id="f" action="generate2.php" method="POST">
<label for="thumb">[thumb]</label> 
<input type="radio" name="type" value="thumb" checked />
<label for="img">[img]</label><input type="radio" name="type" value="img" /><br />
<textarea rows="30" cols="40" name="text">Insert image links on seperate lines</textarea><br />
<input type="button" value="Generate!" id="1_c"/>
</form>
</div>
<script>
 $('#1_c').click(function(){
    var text=$('textarea').val(),
    type=$('input[name="type"]').is(':checked').val();
    $.post('generate2.php', { text: text, type: type },
      function(data) {
          $("#content").html(data);
      });
  });
  function reset(){
    history.go('0');
  }
</script>
</body>

Live version: http://pdo.elementfx.com/thumb/

Upvotes: 2

Views: 887

Answers (5)

jbabey
jbabey

Reputation: 46647

You could also use $('input[name="type"]').prop('checked'); if you prefer.

edit: http://jsfiddle.net/pVhn8/

Upvotes: 0

mamoo
mamoo

Reputation: 8166

The is() method returns a Boolean so it's not clear how you got this statement to work: $('input[name="type"]').is(':checked').val();

You should use $('input[name="type"]:checked').val() instead.

Upvotes: 0

JaredPar
JaredPar

Reputation: 754715

The problem you're running into is the is selector returns a boolean value and not the matched element. This means you end up calling val() on true / false instead of the radio button.

Try using the following selector intstead

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

Fiddle: http://jsfiddle.net/fP2P4/1/

Upvotes: 6

Fiona - myaccessible.website
Fiona - myaccessible.website

Reputation: 14921

is(':checked') returns true if the element is checked. You don't want it to return true or false, you want to select the element that is checked, so use 

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

Upvotes: 1

Blazemonger
Blazemonger

Reputation: 92893

Use this instead:

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

Using is(':checked') returns a Boolean (true/false), which has no .val() and triggers an error.

Upvotes: 1

Related Questions