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

here live example of problem

http://jsfiddle.net/littlesandra88/xksb9/

i have expected "create" button returned empty string, when radio buttons not selected. instead reads value radio buttons form below.

the bottom "save" button returns value form above. strange!

here 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, auto-generate forms of type @ bottom, , don't know id's before hand, give them random numbers make them unique.

how can problem solved?

you may want change line:

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

to

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

so jquery looks in top form, rather in whole dom.

not sure overall goal is, edit @ least gets behavior you're looking for.

if want individual save buttons function in similar way, change to:

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

edit

to other forms work, need change html bit form tags wrap tables, , not other way around. changed each (notice make multiple tables instead of 1 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, radio buttons proper children of forms , jquery happy that.