选择带有“其他”的框显示输入文本字段的选项。如何使用 jquery 获取表单提交的值？
我有一个带有以下选择框的表单：
<fieldset id="workers_comp_info">
<p>
<label for="i_n_r_reason">Reason why Workers Comp Insurance is not required:</label>
<select name="i_n_r_reason" id="i_n_r_reason">
<option value="No employees">No employees</option>
<option value="1-2 employees">1-2 employees</option>
<option value="Other">Other(Specify reason)</option>
</select>
<input id="other_reason" name="other_reason" type="text" placeholder="Other Reason" />
</p>
</fieldset>
我编写了以下 jquery 代码来隐藏“other_reason”文本字段，除非在选择框中选择了“Other”。
$('#i_n_r_reason').change(function() {
$('#other_reason').toggle($(this).val()=='Other');
}).change();
我正在创建一个名为 SubmitForm 的 jquery 方法。我想写这样的内容：
function SubmitForm() {
if ($('#i_n_r_reason').val()=='Other')
('#i_n_r_reason').val = ('#other_reason').val
('#account_form').submit();
}
当用户选择“其他”时，会显示文本字段供他们输入原因。当用户提交表单时，我希望这个原因覆盖“其他”。但这段代码并没有发生这种情况。有什么建议吗？
I've got a form with the following select box:
<fieldset id="workers_comp_info">
<p>
<label for="i_n_r_reason">Reason why Workers Comp Insurance is not required:</label>
<select name="i_n_r_reason" id="i_n_r_reason">
<option value="No employees">No employees</option>
<option value="1-2 employees">1-2 employees</option>
<option value="Other">Other(Specify reason)</option>
</select>
<input id="other_reason" name="other_reason" type="text" placeholder="Other Reason" />
</p>
</fieldset>
I've written the following jquery code to hide the "other_reason" text field unless "Other" is selected in the select box.
$('#i_n_r_reason').change(function() {
$('#other_reason').toggle($(this).val()=='Other');
}).change();
I am creating a jquery method called SubmitForm. I want to write something like this:
function SubmitForm() {
if ($('#i_n_r_reason').val()=='Other')
('#i_n_r_reason').val = ('#other_reason').val
('#account_form').submit();
}
When the user selects 'Other', the text field is displayed for them to enter a reason. I want this reason to override 'Other' when the user submits the form. But its not happening with this code. Any suggestions?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
xar 的答案有一些不错的功能，但它没有实现当选择“其他”时将 #i_n_r_reason 的值替换为 #other_reason 的值的最初目标。我把它们放在一起如下。
xar's answer has some sweet functionality, but it doesn't accomplish the original goal of replacing the value of #i_n_r_reason with the value of #other_reason when "Other" is selected. I put it all together below.
所以基本上它的作用是：
当下拉列表发生变化时，评估值。如果是“其他”则显示文本框，否则隐藏它。
对于第二部分，提交表单后，评估所选下拉菜单的值。如果是“其他”，则阻止表单提交，而是将所选下拉列表的文本更改为文本框中的值。
我想代码是很容易解释的。希望这有帮助。
已编辑
So basically what it does is :
When the dropdown's changing, evaluate the value. If it's "Others" then show the textbox, else hide it.
For the second part, upon submitting the form, evaluate the value of the selected drop down. If it's "Others", then prevent the form from submitting, instead change the text of the selected drop down list to the value from the text box.
I guess the code is pretty explainable. Hope this helps.
EDITED
这是您当前代码的精确副本吗？或者快速重写？缺少了很多东西！！
我不确定您是否可以将选择框的值设置为不是选项的值。您可以做的是有一个隐藏字段来存储选择的值或额外文本框的值。
所以在你的change()函数中你的选择。将隐藏字段的值设置为选择的值，如下所示：
并在表单提交函数中执行以下操作：
is that an exact copy of your current code? or a quick rewrite? there are so many things missing!!
i'm not sure you can set the value of a select box to something that isn't an option. what you could do is have a hidden field that stores the value of the select or the value of your extra textbox.
so in your change() function on your select. set the value of the hidden field to the value of the select with something like:
and in your form submit function do this: