通過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表單

回答

相關問題