Question

我的表单看起来像这样：

<form name="theForm">

    <input name="Name" type="text" placeholder="Name" />

    <select name="Options">
        <option value=1>Option 1</option>
        <option value=2>Option 2</option>
        <option value=3>Other</option>
    </select>

    <button type="submit">Submit</button>

</form>

在幕后，我有一些javascript，如果用户要选择第三个选项（其他），则会创建一个文本输入，用户可以在其中输入未出现在列表中的输入。

我查看了this和this等帖子，其中接受的答案会在提交前更改表单中现有输入的值，但这些不适合我的情况，因为我不能简单地将<select>的值更改为字符串。

所以，我想询问是否可以在提交时更改表单数据，这样如果选择了第三个选项，表单将提交自定义文本框的内容而不是值3

谢谢。

Answer 1

我认为在表单中插入输入文本并隐藏它（CSS或JavaScript）会更容易。用户无法看到它，因此您的表单将发送空字符串，选择选项1或2。当用户选择第三个选项时，您只需使用一些JavaScript显示文本输入，允许用户完成他的答案。您的表单将发送选项3以及输入文本，在这种情况下将由用户填写。

<form name="theForm">

    <input name="Name" type="text" placeholder="Name" />

    <select name="Options">
        <option value=1>Option 1</option>
        <option value=2>Option 2</option>
        <option value=3>Other</option>
    </select>
    <input name="other" type="text" placeholder="My option 3 is..." hidden/>

    <button type="submit">Submit</button>

</form>

Answer 2

如果您可以将解决方案的使用限制在HTML5兼容的浏览器中并暂时排除Safari，则可以使用datalist： https://www.w3schools.com/tags/tag_datalist.asp

它将简化您的HTML代码，并避免任何javascript自定义代码的需要。

在提交表单

2 个答案: