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 に答える