jquery和頁面上的多個表單

我有一個從同一頁上的數據庫輸出的幾種形式。當我不使用ajax時它工作正常。當我使用Jquery時，它僅適用於第一種形式。任何人都可以向我指出正確的方向嗎？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

來源

2010-06-08 Will

你可能想看看「連載（）」 jQuery的方法 - 它聚集了表單字段和構建參數字符串爲您的工作：HTTP ：//api.jquery.com/serialize/ – Pointy 2010-06-08 12:17:01

所有表格和字段的名稱相同/ class。所以，當你做

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; 
)};

來源

2010-06-08 12:13:41

的問題是，像$('.hardSoft')選擇將選擇若干個元素（因爲有多個表格），然後.val()將取第一個值。您可以嘗試使用.parents('form')找到表格，然後帶着其子女.children('.hardSoft')。

另一方面，這是一個相當普遍的任務。看看jQuery Form plugin，它允許你使用更少的代碼來做同樣的事情。它可能也更可靠，並且有幾個功能可能會在以後的項目中使用。

來源

2010-06-08 12:14:58 MvanGeest

我想在你的jQuery選擇器中添加上下文可能會有所幫助。給一個嘗試：

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

上的每個選擇

來源

2010-06-08 12:18:52

剛一說明：您可以節省大量的時間編碼，如果你序列化的形式。

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

來源：

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

來源

2010-06-08 12:22:18

jquery和頁面上的多個表單

回答

相關問題