Always getting wrong radio button value. What's wrong?

Here is a live examp开发者_开发百科le of my problem

http://jsfiddle.net/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?

---

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.