Jquery和页面上的多个表单

我有几个表单，它们是从同一页面上的数据库输出的。当我不使用ajax时，它工作得很好。当我使用Jquery时，它只适用于第一个表单。谁能给我指一下正确的方向吗

Jquery

$('.updateSubmit').live('click', function() {
  var id = $('.id').val();
  var hardSoft = $('.hardSoft').val();
  var brand = $('.brand').val();
  var subCat = $('.subCat').val();
  var subSubCat = $('.subSubCat').val();
  var tProduct = $('.tProduct').val();
  var description = $('.description').val();
  var quantity = $('.quantity').val();
  var price = $('.price').val();
  var tCondition = $('.tCondition').val();
  var featured = $('.featured').val();


  var theData = 'id=' + id + '&hardSoft=' + hardSoft + '&brand=' +
  brand + '&subCat=' + subCat +
  '&subSubCat=' + subSubCat + '&tProduct=' + tProduct
  +'&description=' + description +
  '&quantity=' + quantity + '&price=' + price + '&tCondition=' +
  tCondition + '&featured=' + featured;


  $.ajax ({
    type: 'POST',
    url: '/updateGrab.php',
    data: theData,
    success: function(aaa) {
      $('.'+id).append('<div class="forSuccess">'+aaa+'</div>');
    } // end success
  }); // end ajax

  return false;

}); // end click

$（'.updateSubmit'）.live（'click'，function（））{
var id=$（'.id'）.val（）；
var hardSoft=$（'.hardSoft'）.val（）；
var brand=$（'.brand'）.val（）；
var subCat=$（'.subCat'）.val（）；
var subSubCat=$（'.subSubCat'）.val（）；
var tProduct=$（'.tProduct'）.val（）；
var description=$（'.description'）.val（）；
变量数量=$（'.quantity'）.val（）；
var price=$（'.price'）.val（）；
var tCondition=$（'.tCondition'）.val（）；
var featured=$（'.featured'）.val（）；
变量theData='id='+id+'&hardSoft='+hardSoft+'&brand='+
品牌+'&子类别='+子类别+
“&subSubCat=”+subSubCat+”&tProduct=”+tProduct
+“&description=”+说明+
“&数量=”+数量+”&价格=“+价格+”&条件=”+
t条件+'&特色='+特色；
$.ajax({
键入：“POST”，
url:“/updateGrab.php”，
数据：数据，
成功：功能（aaa）{
$（'.'.+id）.append（''+aaa+''）；
}//最终成功
})；//结束ajax
返回false；
}); // 结束点击

---

还有我的php表单

while ($row = $stmt->fetch()) {

echo " <form action='http://www.wbrock.com/updateGrab.php'
method='post' name='".$id."'>

<input type='hidden' class='id' name='id' value='".$id."' />

Hardware/Software
<input type='text' class='hardSoft' name='hardSoft'
value='".$hardSoft."' />

Brand
<input type='text' class='brand' name='brand' value='".$brand."' />

Sub-category
<input type='text' class='subCat' name='subCat'
value='".$subCat."' />

Sub-Sub-Cat
<input type='text' class='subSubCat' name='subSubCat'
value='".$subSubCat."' />

Product
<input type='text' class='tProduct' name='tProduct'
value='".$tProduct."' />

Description
<input type='text' class='description' name='description'
value='".$description."' />

Qty
<input type='text' class='quantity' name='quantity'
value='".$quantity."' />

Price
<input type='text' class='price' name='price' value='".$price."' />

Cond
<input type='text' class='tCondition'
name='tCondition'value='".$tCondition."' />

Featured
<input type='text' class='featured' name='featured'
value='".$featured."' />


<input type='submit' id='".$id."' class='updateSubmit'
name='updateSubmit' value='Update' />

</form>

<span class='".$id."'></span>

"; // end echo

} // end while loop from database

while（$row=$stmt->fetch（））{
回声“
硬件/软件
烙印
子类别
次级猫
产品
描述
数量
价格
康德
作为特色的
“；//结束回音
}//在从数据库执行循环时结束

---

---

所有表单和字段都具有相同的名称/类。所以当你这么做的时候

var hardSoft = $('.hardSoft').val();

您只能通过类

hardSoft

获得第一个元素的值

---

您可以使用获取“父”表单元素，并使用该元素创建数据字符串：

$('.updateSubmit').live('click', function() {

    var $form = $(this).closest('form'); // get the form element this button belongs to
    var theData = $form.serialize(); // generates the data string

    $.ajax ({
       type: 'POST',
       url: '/updateGrab.php',
       data: theData,
       success: function(aaa) {
         // append return data to the current form
         $form.append('<div class="forSuccess">'+aaa+'</div>');
       } // end success
    }); // end ajax
    return false;
)};

$（'.updateSubmit'）.live（'click'，function（））{
var$form=$（this）.closest（'form'）；//获取此按钮所属的表单元素
var theData=$form.serialize（）；//生成数据字符串
$.ajax({
键入：“POST”，
url:“/updateGrab.php”，
数据：数据，
成功：功能（aaa）{
//将返回数据追加到当前表单
$form.append（“”+aaa+“”）；
}//最终成功
})；//结束ajax
返回false；
)};

所有表单和字段都具有相同的名称/类别。所以当你这么做的时候

var hardSoft = $('.hardSoft').val();

您只能通过类

hardSoft

获得第一个元素的值

---

您可以使用获取“父”表单元素，并使用该元素创建数据字符串：

$('.updateSubmit').live('click', function() {

    var $form = $(this).closest('form'); // get the form element this button belongs to
    var theData = $form.serialize(); // generates the data string

    $.ajax ({
       type: 'POST',
       url: '/updateGrab.php',
       data: theData,
       success: function(aaa) {
         // append return data to the current form
         $form.append('<div class="forSuccess">'+aaa+'</div>');
       } // end success
    }); // end ajax
    return false;
)};

$（'.updateSubmit'）.live（'click'，function（））{
var$form=$（this）.closest（'form'）；//获取此按钮所属的表单元素
var theData=$form.serialize（）；//生成数据字符串
$.ajax({
键入：“POST”，
url:“/updateGrab.php”，
数据：数据，
成功：功能（aaa）{
//将返回数据追加到当前表单
$form.append（“”+aaa+“”）；
}//最终成功
})；//结束ajax
返回false；
)};

问题是像

$（'.hardSoft'）

这样的选择器将选择几个元素（因为有多种形式），然后

.val（）

将取第一个元素的值。您可以尝试使用

.parents（'form'）

查找表单，然后将其子项

.children（'.hardSoft'）

---

另一方面，这是一项相当普遍的任务。请看一下，它允许您使用更少的代码来完成相同的操作。它可能也更可靠，并且有几个功能，您可能希望以后在项目中使用。

问题是像

$（'.hardSoft'）

这样的选择器将选择几个元素（因为有多个表单），然后

.val（）

将取第一个元素的值。您可以尝试使用

.parents（'form'）

查找表单，然后将其子项

.children（'.hardSoft'）

---

另一方面，这是一项相当普遍的任务。请看一下，它允许您使用更少的代码来完成相同的操作。它可能也更可靠，并且有几个功能，您可能希望在以后的项目中使用。

我想在jQuery选择器中添加上下文可能会有所帮助。试着：

 var hardSoft = $('.hardSoft', $(this).parent()).val();

---

在每个选择器上，我想在jQuery选择器中添加上下文可能会有所帮助。试着：

 var hardSoft = $('.hardSoft', $(this).parent()).val();

在每个选择器上，只需注意： 如果序列化这些表单，则可以节省大量的编码时间

$('.updateSubmit').live('click', function() {
  $.post("updateGrab.php", $("#yourform").serialize()); 
}

资料来源：

请注意： 如果序列化这些表单，则可以节省大量的编码时间

$('.updateSubmit').live('click', function() {
  $.post("updateGrab.php", $("#yourform").serialize()); 
}

资料来源：

---

您可能需要查看“serialize（）”jQuery方法-它为您收集表单字段并构建参数字符串：您可能需要查看“serialize（）”jQuery方法-它为您收集表单字段并构建参数字符串：