帶保存和刪除按鈕的表單

我在表格中有一個HTML5表單。最後一行包含兩個提交按鈕，分別是'保存編輯'（修改服務器上的記錄）和一個'刪除'（刪除服務器上的記錄）。這對我的用戶界面很好，但它有兩個不良的副作用：帶保存和刪除按鈕的表單

當按下刪除按鈕時，表格中的數據與它一起發送。我在服務器上忽略它，但它看起來像是浪費數據。
如果表單中的數據無法通過HTML5驗證（例如<input type="email" />），則「刪除」按鈕無法正常工作。我希望保留「保存編輯」按鈕的驗證，因此novalidate不是解決方案。

這裏是我的提交按鈕代碼：

<form action="" method="post"><table> 
    <tr><th><label for="input-email">Email</label></th><td><input name="email" id="input-email" value="[email protected]" type="email" /></td></tr> 
    <!-- Other input fields --> 
    <tr><td colspan="2"> 
     <div style="float:right;width:50%"><input type="submit" name="save" value="Save Edits" /></div> 
     <div style="width:50%"><input type="submit" name="delete" value="Delete" onclick="return confirm('Are you sure?')" /></div> 
    </td></tr> 
</table></form>

我想盡可能避免使用Javascript。

我該如何修復刪除按鈕？

來源

2016-11-18 Nulano

也許'

@theoretisch也許。它可以用'delete = Delete'值發送POST請求嗎？ – Nulano

嗯不，我不這麼認爲。它只重置數據。但我不確定。用js或ajax應該是可能的，但是如果我理解你是對的，你就不會使用它。 – theoretisch

好，的刪除按鈕，您可以使用兩個approches，

您可以使用Ajax調用你需要刪除數據的唯一細節。這樣頁面不會回發到服務器，只執行刪除操作。你將不得不使用js從顯示器處理除去部分。
您可以使用腳本進行刪除按鈕的onclick事件，您可以在此處詢問確認，然後如果用戶確認可以將「novalidate」屬性添加到字段中，然後提交表單。通過這種方式驗證將保存到位，而對於刪除，您可以繞過它們。

希望這可以幫助，讓我知道如果你需要進一步的幫助。

來源

2016-11-18 08:39:47

第二種方法適合我。 – Nulano

帶保存和刪除按鈕的表單

回答

相關問題