Question

我在表格中有一个HTML5表单。最后一行包含两个提交按钮，“保存编辑”（用于修改服务器上的记录）和一个“删除”（用于删除服务器上的记录）。这适用于我的UI，但它有两个不良的副作用：

按下删除按钮时，表格中的数据随之发送。我在服务器上忽略它，但它似乎浪费了数据。
如果表单中的数据无法通过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="john.doe@example.com" 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。

如何修复删除按钮？

Answer 1

那么，对于删除按钮，您可以使用两个approches，

您可以使用ajax调用，其中包含删除数据所需的唯一详细信息。这样页面不会回发到服务器，只执行删除操作。你必须使用js从显示器处理删除部分。
您可以使用脚本执行删除按钮的onclick事件，您可以在此处询问确认，然后如果用户确认您可以添加＆＃39; novalidate＆＃39;属性到字段然后提交表单。通过这种方式，验证将用于保存，对于删除，您可以绕过它们。

希望这有帮助，如果您需要进一步的帮助，请告诉我。

使用保存和删除按钮的表单

1 个答案: