javascript - Always getting wrong radio button value. What's wrong? - Stack Overflow

admin管理员组

文章数量:1291925

Here is a live example of my problem

/

I would have expected that the "Create" button returned an empty string, when its radio buttons are not selected. Instead it reads the value from the radio buttons from the form below.

The bottom "Save" button always returns the value from the form above. Very strange!

Here is the code

$(document).ready(function(){

   $('form').live('submit', function(){

      var title      = this.elements.title.value;
      var owner      = this.elements.owner.value;

      var type = $('input:radio[name=ctype]:checked').val() || '';

      alert(type);

    });
});

The idea is, I will auto-generate forms of the type at the bottom, and so don't know the ID's before hand, so I just give them random numbers to make them unique.

How can this problem be solved?

Here is a live example of my problem

http://jsfiddle/littlesandra88/xksB9/

I would have expected that the "Create" button returned an empty string, when its radio buttons are not selected. Instead it reads the value from the radio buttons from the form below.

The bottom "Save" button always returns the value from the form above. Very strange!

Here is the code

$(document).ready(function(){

   $('form').live('submit', function(){

      var title      = this.elements.title.value;
      var owner      = this.elements.owner.value;

      var type = $('input:radio[name=ctype]:checked').val() || '';

      alert(type);

    });
});

The idea is, I will auto-generate forms of the type at the bottom, and so don't know the ID's before hand, so I just give them random numbers to make them unique.

How can this problem be solved?

• javascript
• jquery

Share Improve this question Follow asked May 11, 2011 at 12:23 Sandra SchlichtingSandra Schlichting 26k3838 gold badges121121 silver badges185185 bronze badges 1

• My version of chrome treats your example HTML very strangely. I think you should either put your table inside your form, and/or your forms inside tds - interlacing the form and table as you are doing causes my browser to prematurely and automatically terminate your form DOM elements leaving the radio buttons outside the forms. – sje397 Commented May 11, 2011 at 12:41

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 8

You may want to just change this line:

var type = $('input:radio[name=ctype]:checked').val() || '';

to

var type = $('#create_form input:radio[name=ctype]:checked').val() || '';

So that jQuery only looks in the top form, rather than in whole DOM.

Not sure what the overall goal is, but that edit at least gets you the behavior you're looking for.

If you want the individual save buttons to function in a similar way, change it to:

var type = $(this).find('input:radio[name=ctype]:checked').val() || '';

EDIT

To get the other forms to work, you need to change the HTML a bit so that the form tags wrap the tables, and not the other way around. This is what I changed each for to (notice that this would make multiple tables instead of one table):

<form action="" method="post">
  <input name="anchor" value="54" type="hidden">
  <table class="alerts" cellspacing="0">
    <tbody>
      <tr>                                
        <td class="activity-data">54</td>
        <td class="activity-data"> <input name="title" id="54_title" value="" type="text" /> </td>
        <td class="activity-data"> <input name="owner" id="54_owner" value="" type="text" /> </td>          
        <td class="activity-data"> <input name="ctype" value="individuel" type="radio" checked/> Individuel <br> <input name="ctype" value="course" type="radio" /> Course </td>
        <td> <input value="Save" type="submit" /></td>
      </tr>
    </tbody>
  </table>
</form>

This way, the radio buttons are proper children of the forms and jQuery is happy about that.

Each group of radio buttons should probably have their own matching names, because it looks like the form treats them as separate groups. For instance, your first group of radio buttons might have the name foo:

<input name="foo" id="ctype" value="individuel" type="radio" /> Individuel <br/>
<input name="foo" id="ctypee" value="course"    type="radio" /> Course <br/>

Now these radio buttons are a part of the same radio group, and the others are a part of another group (although they should be named different from each other as well). Now you can safely grab the value from the foo radio group:

$(document).ready(function(){

   $('form').live('submit', function(){

      var title      = this.elements.title.value;
      var owner      = this.elements.owner.value;

      // looking for 'foo' radio button group selection
      var type = $('input:radio[name=foo]:checked').val() || '';

      alert(type); // alerts the correct selection from the top form
    });
});

If you look at this line:

<input name="ctype" value="individuel" type="radio" checked/> 

you can see that you've included a 'checked' attribute in there. Remove it to solve your issue around having the 'individuel' returned when there are no selections.

Oh, and if you want to pre-select a value, it's supposed to be

<input name="ctype" value="individuel" type="radio" checked="checked" /> 

NOTE: This is just to add to what others have said already.

本文标签： javascriptAlways getting wrong radio button value What39s wrongStack Overflow