Question

我有一个名为publish.php的页面，允许用户输入他们刚刚在上一页上传的每个图像（名称，描述，位置等）的详细信息，每个图像都有自己的图像表单输入此信息。并非所有表单都会一次显示，而是所有图像都显示为页面顶部的缩略图，单击图像会隐藏上一个图像的表单并显示当前图像的表单，因此它类似于选项卡式布局。

我想要做的是通过单个提交按钮提交所有这些表单，该按钮与每个表单隔离并位于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数组的末尾。在我页面的右上角，我放置了一个提交按钮，如果没有错误，我想提交所有这些表单，如果有，只需在不提交的情况下回显它们。

我将如何完成此任务？

Answer 1

这样的事情怎么样？

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/

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

1 个答案: