jQuery和页面上的多种表单 [英] Jquery and multiple forms on a page

问题描述

我有几种形式是从同一页面上的数据库输出的.当我不使用ajax时，它可以正常工作.当我使用Jquery时，它将仅适用于第一种形式.有人可以指出我正确的方向吗?

I have a several forms that are output from a database on the same page. It works fine when I don't use ajax. When I use Jquery it will only work for the first form. Could anyone point me in the right direction please?

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

---

和我的php表格...

---

and my php form......

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

---

推荐答案

所有表单和字段均具有相同的名称/类.所以当你这样做

All the forms and the fields have the same name / class. So when you do

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

您只能获得类hardSoft的第一个元素的值.

you only get the value of the first element with class hardSoft.

您可以使用 .closest() 来获取父"表单元素，并使用 .serialize() 创建数据字符串:

You can get the "parent" form element with .closest() and use .serialize() to create the data string:

$('.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;
)};

这篇关于jQuery和页面上的多种表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！