mysql - Values not passing to php with ajax -

i have following script :

<script type="text/javascript" >  $('form').each(function() {     $(this).on('submit', function() {  var first_firstname = $(".first_firstname", this).val(); var first_lastname = $(".first_lastname", this).val(); var second_firstname = $(".second_firstname", this).val(); var second_lastname = $(".second_lastname", this).val(); var teamname = $(".teamname", this).val(); var datastring = 'first_firstname='+ first_firstname + '&first_lastname=' + first_lastname + '&second_firstname=' + second_firstname + '&second_lastname=' + second_lastname + '&teamname=' + teamname;   $.ajax({ type: "post", url: "data.php", data: datastring, success: function(){ window.settimeout(function(data) { $('#propspectdiv').html('team name added!'); $('#data').css("display","block"); $('#data').html(data); }, 2000); }  });  return false; });  </script> 

and following php generates number of forms on page using mysql database

<?php      echo '<table class="greensmalltbl" cellspacing="10px" cellpadding="5px"><div id="propspectdiv"></div>';      ($i=1,  $o=$totalentrants; $i<=$half; $i++, $o=$o-1) {      $formid = $i;   echo "<div style='border:3px;'><form action='' method='post'> <tr><td><input type='text' name='first_firstname' id='first_firstname' value='$firstname[$i]' /> <input type='text' name='first_lastname' id='first_lastname' value='$lastname[$i]' />   skill level : ".$skill[$i]."</td></tr>"; echo "<tr><td>with</td></tr>"; echo "<tr><td><input type='text' name='second_firstname' id='second_firstname' value='$firstname[$o]' /> <input type='text' name='second_lastname' id='second_lastname' value='$lastname[$o]' /> skill level ".$skill[$o]."</td></tr>"; echo "<tr><td>enter team name : <input type='text' name='teamname' id='teamname' value='' /> <input type='submit' name='submit' value='submit'></form></td></tr>";      }  echo '</table>'; 

?>

i want update db table team name in each form

the problem first forms input passed other forms nothing have tried number of variations ajax code none have worked. can find problem here

this line not return form.

var parent = $(this).parent('form'); 

because submit button wrapped inside tr , td tags. either rid of tags (they invallid anyway, because not using them in table), or update code to:

var parent = $(this).closest('form'); 

closest() searches way ancestors of element, , return first match of selector. check out documentation here: http://api.jquery.com/closest/

or, if have single form in page, go:

var parent = $('form'); 

:: edit ::

ok. forget of above. seems not using parent variable later in code. more important problem though catching click event on form submit button, want catch submit-event of form.

so change first line of code this:

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

also, in html, code invalid.

<form action'' method='post' id='$formid'> 

action'' should action = ''

chances doesn't fix problem, because there might more errors. next time, try validate code before posting question.

:: edit ::

last edit, promise. went trough code again, , seems have multiple forms. means, elements in different forms same id's. id should unique troughout page. when try value $("#second_firstname").val(); won't work. because jquery doesn't know element mean, elements can appear multiple times in page need have class , can not have id.

you loop trough forms changing things to:

$('form').each(function() {     $(this).on('submit', function() {          var first_firstname = $(".first_firstname", this).val(); // . instead of # , use 'this' context          // , on..         // rest of code here.     } }); 

table forms can seen here