通过AJAX通过单个提交按钮提交多个HTML表单

我有一个名为publish.php的页面，它允许用户输入他们刚刚在上一页上传的每个图像（名称，描述，位置等）的详细信息，每个图像都有自己的形式来输入这些信息。并非所有表单都一次显示，相反，所有图像都以缩略图形式显示在页面顶部，点击图像可隐藏前一图像的表单，并显示当前图像的表单，因此它与标签式布局类似。通过AJAX通过单个提交按钮提交多个HTML表单

我想要做的就是通过一个单独的提交按钮来提交所有这些表单，这个按钮与每个表单都是分开的，并且位于publish.php页面的一个单独区域 - 如果有任何错误，我也想回复它们。我的简短研究表明，单独使用HTML是不可能的，并且AJAX将是必需的。

这里是什么样的PHP代码看起来像显示每个图像和形式的精华版本：

// Display each image 
$i = 0; 
foreach ($images as $image) { 
    echo '<img src="imageSrc'.$i.'" />'; 
    $i++; 
} 

// Further down the page... display each form... 
$i = 0; 
foreach ($images as $image) { 
    include 'publishform.php'; 
    $i++; 
}

publishform.php看起来有点像这样：

<form id="image<?php echo $i; ?>"> 
    <label>Name</label> 
    <input name="image[<?php echo $i; ?>][Name]" /> 

    <label>Location</label> 
    <input name="image[<?php echo $i; ?>][Location]" /> 

    <!-- etc, etc, for description, coordinates, camera etc --> 

</form>

因此，基本上，每个图像链接到变量$i的每个表格，该变量根据需要递增，直到达到$images数组的末尾。在我的页面的右上角，我已经放置了一个提交按钮，如果没有错误，我想提交所有这些表单，如果有的话，只需在不提交的情况下将它们回显出来。

我该如何去做到这一点？

来源

2013-03-02 ReactingToAngularVues

这样的事情呢？

function post_form_data(data) { 
    $.ajax({ 
     type: 'POST', 
     url: 'somewhere', 
     data: data, 
     success: function() {}, 
     error: function() {} 
    }); 
} 

$('button').on('click', function() { 
    $('form').each(function() { 
     post_form_data($(this).serialize()); 
    }); 
});

http://jsfiddle.net/MxHQe/

来源

2013-03-02 21:51:44 pdoherty926

谢谢！你能总结一下你的答案和ThinkingStiff的答案之间的区别吗？哪一个更好？如何能通过这个错误回应？ – ReactingToAngularVues 2013-03-02 21:54:36

@防病毒+1这是正确的做法。 – ThinkingStiff 2013-03-02 22:10:24

你说得对。咄。我删除了我的答案。 – ThinkingStiff 2013-03-02 22:12:05

通过AJAX通过单个提交按钮提交多个HTML表单

回答

相关问题