Question

我有一个表单，用作数据库记录上CRUD的接口。表单上的某些元素是相互依赖的，因此如果一个字段的值为X，则应该使用其他字段并由用户填写。

一个简单的例子可能是个人信息部分：

<select name="relationship-status">
    <option value="single">Single</option>
    <option value="married">Married</option>
</select>

<input type="text" name="spouse-first-name" />
<input type="text" name="spouse-last-name" />

...如果spouse-first-name设置为spouse-last-name，则需要字段relationship-status和married，否则将被禁用（或隐藏）。

我的问题是，在这个例子中，当一个人从已婚到单身并希望更新他们的数据时，我们还想清除配偶名称值并将其发回服务器以便清除这些值在数据库中。我们可以使用JavaScript在它们更改为single时清除它们的字段，但是如果我们禁用表单元素以便它们无法编辑它们，那么它们就不会在提交表单时获得POST。 / p>

我可以想到以下解决方案：

我们可以将它们设为readonly而不是disabled，但该方法仅适用于某些表单控件（具体而言，它不适用于其他select元素），因此这不是一个选择。
我们可以将这些字段中的每一个复制为hidden输入，该输入将使用表单进行POST，但不能由用户编辑，但这看起来像是一个黑客。
我们也可以在提交之前启用已禁用的字段，然后立即重新禁用它们。这是我现在使用的方法，但我觉得我错过了一些东西，并且必须有更好的方法。

是否有一些我没有想到的东西，或者是一种更明智的方法来实现两者：

不允许用户编辑字段，
允许使用表单对字段的值进行POST，即使为空。

Answer 1

我的建议是，除了在客户端进行验证之外，在javascript中添加函数form.submit（），如果有人禁用JS将无法提交表单，除此之外同意其他人评论，添加服务器验证。

Answer 2

我发现最强大且最不易克服的解决方案是对readonly以外的所有元素使用<select>属性。对于<select>元素，我只是禁用当前未选中的<option>子元素。这有效地防止用户改变该值。然后我为<select>着色，好像它被灰色背景禁用以完成幻觉。此时，所有表单元素都将使用表单发布，即使没有值，也不管它们是否“禁用”。

HTML：POST空/禁用表单元素的最佳实践

2 个答案: