jQuery、Ajax 和 PHP 提交多表单的困境

Question

这是我在网上找到的一个非常简单的表单（因为我是 jQuery 初学者）。

<!-- this is my jquery -->

<script>
    $(document).ready(function(){
$("form#submit_wall").submit(function() {

var message_wall = $('#message_wall').attr('value');
var id = $('#id').attr('value');
$.ajax({
type: "POST",
url: "index.php?leht=pildid",
data:"message_wall="+ message_wall + "&id="+ id,
cache: false,

success: function(){
$("ul#wall").prepend(""+message_wall+"", ""+id+"");
$("ul#wall li:first").fadeIn();

alert("Thank you for your comment!");
}
});
return false;
});
});
</script>

<!-- this is my HTML+PHP -->
some PHP ...
      while($row_pilt = mysql_fetch_assoc($select_pilt)){

       print 

<form id="submit_wall">
<label for="message_wall">Share your message on the Wall</label>
<input type="text" id="message_wall" />
<input type="hidden" id="id" value="'.(int)$row_pilt['id'].'">
<button type="submit">Post to wall</button>
</form>

下面是我的 PHP 脚本 写入 mySQL。

这是一个非常简单的脚本。但是，当我提交它时，它变得有点复杂。由于我的页面上有多个表单（每个 WHILE PHP LOOP），因此当我提交时 - 只有第一个表单被提交。此外，我提交的任何其他后续表格 - 数据都是从第一个表格中复制的。 是否有任何清除数据的 jQuery 函数？ - 或者有更好的解决方案。

谢谢， 尼克

Answer 1

这是因为您为每个表单提供了相同的 id，因此它提交了它找到的具有该 id 的第一个元素，即第一个表单。你应该做的是为每个表单分配一个唯一的 id，然后给每个表单一个提交表单特定数据的 AJAX 提交函数。您可以使用 jQuery 的 $.each() 函数遍历所有表单，并在提交函数中使用 $(this).attr('id') 来检索特定于表单的 id。

更新：正如对此答案的评论所揭示的那样，您实际上不需要 each() 函数，因为 jQuery 无论如何都会将它应用于每个表单元素。

这是一个示例脚本：

$(document).ready(function(){
    $("form").submit(function() {
        var message_wall = $(this).children('input[type="text"]').attr('value');
        var id = $(this).children('input[type="hidden"]').attr('value');
        $.ajax({
            type: "POST",
            url: "index.php?leht=pildid",
            data:"message_wall="+ message_wall + "&id="+ id,
            cache: false,
            success: function(){
                $("ul#wall").prepend(""+message_wall+"", ""+id+"");
                $("ul#wall li:first").fadeIn();
                alert("Thank you for your comment!");
            }
        });
       return false;
   });
});

Answer 2

因为我们无法看到您的forms 所有，我不完全确定，但鉴于您的问题，我将假设其他表单都共享相同的 @ 987654324@ (form#submit_wall)，这是无效的 id 必须在文档中是唯一的。

鉴于您要更改其他表单的id（我建议使用class 名称，可能是“submit_wall”，但具体取决于您），jQuery 需要也要改变。来自：

$("form#submit_wall").submit(function() {

收件人：

$("form.submit_wall").submit(function() { // using the class-name instead of the id.

现在，当然，您会遇到重复 ids 的相同问题。

所以我再次建议将 id 更改为 class 并更改：

var message_wall = $('#message_wall').attr('value');
var id = $('#id').attr('value');

到：

var message_wall = $(this).find('.#message_wall').attr('value');
var id = $(this).find('.id').attr('value');

鉴于您在上面发布的混乱，我很难相信这就是您所需要的。绝对值得发布完整的页面（或JS Fiddle 或JS Bin 的演示），完全 复制您的代码。