0

我有一个名为的页面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到达数组的末尾。在页面的右上角，我放置了一个提交按钮，如果没有错误，我想提交所有这些表单，如果有，只需将它们回显而不提交。

我将如何实现这一目标？

4

1 回答 1

4

这样的事情呢？

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-02T21:51:44.627 回答