在提交表单之前将选择的值更改为自定义字符串答案

【问题标题】：Change value of select to a custom string before submitting form在提交表单之前将选择的值更改为自定义字符串
【发布时间】：2018-09-27 02:12:01
【问题描述】：

我有一个看起来像这样的表单：

<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。

谢谢。

【问题讨论】：

也发布你的javascript`代码
您可以在 JavaScript 中使用 onsubmit 事件并在返回 true 提交之前更改表单。

标签： javascript html forms

【解决方案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>

【讨论】：

我明白你的意思。我想到了这一点，但为了简单起见，我最终希望表单提交一个值。不是选择下拉列表的值和输入框的值，因为我只需要来自其中一个或另一个的信息。谢谢您的回答。不知道为什么投反对票。

【解决方案2】：

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

它将简化您的 HTML 代码并避免使用任何 javascript 自定义代码。

【讨论】：