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和页面上的多个表单

回答

相关问题