值未通过使用Ajax

Question

到PHP我有以下脚本：

<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> 

而下面的PHP，使用mysql数据库

<?php  

echo '<table class="greensmalltbl" cellspacing="10px" cellpadding="5px"><div id="propspectDiv"></div>'; 

    for ($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>'; 

>

产生了一些页面上的形式？

我想用每个表格中的TEAM NAME更新db表

问题是只有f第一种形式的输入通过所有其他形式不做任何事 我已经尝试了一些变种的ajax代码，但都没有工作。 任何人都可以在这里找到问题

Answer 1

此行不会返回表单。

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

，因为你的提交按钮被包裹在里面tr和td标签。无论是摆脱这些标签的（他们反正invallid，因为你不是在table使用它们），或更新您的代码：

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

closest()搜索它的方式，以一个元素的所有祖先，和将返回选择器的第一个匹配项。 看看这里的文档：http://api.jquery.com/closest/

或者，如果你只需要在你的页面的单一形式，你可以随便去：

var parent = $('form'); 

::编辑::

确定。忘记以上所有。看起来你甚至没有在代码中使用父变量。 更重要的问题是，即使您正在捕获表单提交按钮上的Click事件，您可能确实想要做的是捕获表单的提交事件。

所以，你的第一行代码改成这样：

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

而且，在你的HTML，你的代码是无效的。

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

action''应该是action = ''

机会是这并不能真正解决您的问题，因为可能有更多的错误。下次在发布问题前尝试验证您的代码。

::编辑::

最后编辑，我保证。我很快就再次浏览了你的代码，看起来你会有多种形式。这意味着，你将获得具有相同ID的不同形式的元素。 id在整个页面中应该是唯一的。所以当你试图获得像这样的值$("#second_firstname").val();这是行不通的。因为jQuery不知道你说的是什么元素，所以在页面中多次出现的所有元素都需要有一个类并且不能有一个id。

然后，您可以您的形式改变的事情循环槽：

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

     var first_firstname = $(".first_firstname", this).val(); // . instead of # and use 'this' as context 

     // and so on.. 
     // the rest of your code here. 
    } 
}); 

table with forms can be seen here