0

我有一个表单，用作数据库记录上 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-statusmarried

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

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

  • 我们可以用它们readonly代替disabled，但该方法仅适用于某些表单控件（特别是，它不适用于其他select元素），因此这不是一个选项。

  • 我们可以将这些字段中的每一个复制为hidden将与表单一起发布的输入，但用户不可编辑，但这似乎是一种 hack。

  • 我们也可以在提交之前启用禁用的字段，然后在之后重新禁用它们。这是我现在正在使用的方法，但我觉得我错过了一些东西，必须有更好的方法。

有没有我没有想到的东西，或者是实现两者的更明智的方式：

  1. 不允许用户编辑字段，并且
  2. 允许字段的值与表单一起发布，即使是空白的。
4

2 回答 2

0

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

于 2012-04-17T19:34:09.400 回答
0

我发现最健壮和最不笨拙的解决方案是将该readonly属性用于除<select>. 对于<select>元素，我只是禁用当前未选中<option>的子元素。这有效地防止了用户改变值。然后我给它上色，就好像它被禁用了灰色背景一样，以完成幻觉。此时，所有表单元素都将随表单一起发布，即使没有值，也不管它们是否“禁用”。<select>

于 2012-07-10T21:03:30.267 回答