Jquery и несколько форм на странице

Question

У меня есть несколько форм, которые выводятся из базы данных на той же странице. Это прекрасно работает, когда я не использую 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

---

и моя форма 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

---

Answer 1

Все формы и поля имеют одинаковое имя / класс.Поэтому, когда вы делаете

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

, вы получаете только значение первого элемента с классом hardSoft.

---

. Вы можете получить "родительский" элемент формы с помощью .closest() и используйте .serialize() для создания строки данных:

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

Answer 2

Просто примечание: Вы можете сэкономить много времени на кодировании, если сериализуете эти формы.

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

Источник:

http://api.jquery.com/serialize/

Answer 3

Полагаю, добавление контекста в селекторы jQuery может помочь. Попробуйте:

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

на каждом селекторе

Answer 4

Проблема в том, что селекторы типа $('.hardSoft') выберут несколько элементов (поскольку существует несколько форм), а затем .val() примет значение первого.Вы можете попытаться найти форму, используя .parents('form'), а затем взять ее дочерние элементы .children('.hardSoft').

$('.updateSubmit').live('click', function() {
    var currentForm = $(this).parent();
    var hardSoft = currentForm.children('.hardSoft').val();
    // ... etc.

С другой стороны, это довольно распространенная задача.Взгляните на плагин jQuery Form , который позволяет вам делать то же самое, используя гораздо меньше кода.Возможно, он также более надежен и имеет несколько функций, которые вы, возможно, захотите использовать позже в своем проекте.