Question

Here is a live example 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?

Answer 1

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.