Fatal编程技术网
  • jquery/
  • 选择带有“其他”选项的框以显示输入文本字段。如何使用jquery获取表单提交的值？

选择带有“其他”选项的框以显示输入文本字段。如何使用jquery获取表单提交的值？

jquery forms drop-down-menu

选择带有“其他”选项的框以显示输入文本字段。如何使用jquery获取表单提交的值？,jquery,forms,textfield,drop-down-menu,Jquery,Forms,Textfield,Drop Down Menu,我有一个带有以下选择框的表单： <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="

我有一个带有以下选择框的表单：

<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>
我正在创建一个名为SubmitForm的jquery方法。我想写这样的东西：

function SubmitForm() {
  if ($('#i_n_r_reason').val()=='Other')
    ('#i_n_r_reason').val = ('#other_reason').val
  ('#account_form').submit();
}
当用户选择“其他”时，将显示文本字段，以便用户输入原因。当用户提交表单时，我希望此原因覆盖“其他”。但这段代码不会发生这种情况。有什么建议吗

function SubmitForm() {
  if ($('#i_n_r_reason').val()=='Other')
    ('#i_n_r_reason').val = ('#other_reason').val
  ('#account_form').submit();
}
那是你当前代码的精确副本吗？还是快速重写？有那么多东西不见了

我不确定是否可以将选择框的值设置为非选项。你可以做的是有一个隐藏的字段来存储select的值或额外文本框的值

因此，在您选择的更改功能中。将隐藏字段的值设置为select的值，如下所示：

$('#MyHiddenField').val($(this).val());
在表单提交功能中，执行以下操作：

if ($('#i_n_r_reason').val()=='Other'){
 $('#MyHiddenField').val($('#MyHiddenField').val());
}
那是你当前代码的精确副本吗？还是快速重写？有那么多东西不见了

我不确定是否可以将选择框的值设置为非选项。你可以做的是有一个隐藏的字段来存储select的值或额外文本框的值

因此，在您选择的更改功能中。将隐藏字段的值设置为select的值，如下所示：

$('#MyHiddenField').val($(this).val());
在表单提交功能中，执行以下操作：

if ($('#i_n_r_reason').val()=='Other'){
 $('#MyHiddenField').val($('#MyHiddenField').val());
}
所以它基本上是：

当下拉列表发生变化时，计算该值。如果是其他，则显示文本框，否则隐藏它

对于第二部分，在提交表单时，评估所选下拉列表的值。如果是其他，则阻止表单提交，而是将所选下拉列表的文本更改为文本框中的值

我想代码是可以解释的。希望这有帮助

编辑

所以它基本上是：

当下拉列表发生变化时，计算该值。如果是其他，则显示文本框，否则隐藏它

对于第二部分，在提交表单时，评估所选下拉列表的值。如果是其他，则阻止表单提交，而是将所选下拉列表的文本更改为文本框中的值

我想代码是可以解释的。希望这有帮助

编辑后的

xar的答案有一些甜美的功能，但它并没有实现在选择other时将i_n_r_理性的值替换为other_理性的值的原始目标。我把它们放在下面

<html>
<head>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">
        google.load("jquery", "1.4.4");
    </script>
    <script type="text/javascript">
        $(function(){
            //initially hide the textbox
            $("#other_reason").hide();
            $('#i_n_r_reason').change(function() {
              if($(this).find('option:selected').val() == "Other"){
                $("#other_reason").show();
              }else{
                $("#other_reason").hide();
              }
            });
            $("#other_reason").keyup(function(ev){
                var othersOption = $('#i_n_r_reason').find('option:selected');
                if(othersOption.val() == "Other")
                {
                    ev.preventDefault();
                    //change the selected drop down text
                    $(othersOption).html($("#other_reason").val()); 
                } 
            });
            $('#form_id').submit(function() {
                var othersOption = $('#i_n_r_reason').find('option:selected');
                if(othersOption.val() == "Other")
                {
                    // replace select value with text field value
                    othersOption.val($("#other_reason").val());
                }
            });
        });
    </script>
</head>
<body>
<form action="http://www.perfectweb.com/resources/post.php" id="form_id" method="post">
    <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>
    <input id="form_submit" type="submit" value="submit" />
</form>
</body>
</html>
xar的答案有一些甜美的功能，但它并没有实现在选择other时用other_reason的值替换i_n_r_reason的值的原始目标。我把它们放在下面

<html>
<head>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">
        google.load("jquery", "1.4.4");
    </script>
    <script type="text/javascript">
        $(function(){
            //initially hide the textbox
            $("#other_reason").hide();
            $('#i_n_r_reason').change(function() {
              if($(this).find('option:selected').val() == "Other"){
                $("#other_reason").show();
              }else{
                $("#other_reason").hide();
              }
            });
            $("#other_reason").keyup(function(ev){
                var othersOption = $('#i_n_r_reason').find('option:selected');
                if(othersOption.val() == "Other")
                {
                    ev.preventDefault();
                    //change the selected drop down text
                    $(othersOption).html($("#other_reason").val()); 
                } 
            });
            $('#form_id').submit(function() {
                var othersOption = $('#i_n_r_reason').find('option:selected');
                if(othersOption.val() == "Other")
                {
                    // replace select value with text field value
                    othersOption.val($("#other_reason").val());
                }
            });
        });
    </script>
</head>
<body>
<form action="http://www.perfectweb.com/resources/post.php" id="form_id" method="post">
    <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>
    <input id="form_submit" type="submit" value="submit" />
</form>
</body>
</html>
我现在正在使用一个隐藏字段，但我遇到了从中获取值的问题。我将用新的代码再次发布这个问题。我现在使用一个隐藏字段，但我有一个从中获取值的问题。我将用新的代码再次发布这个问题。谢谢，show和hide似乎并没有真正隐藏这个框。不过，我使用的切换选项确实有效。而且我似乎无法覆盖选择框的值。@user338413:代码在这里工作正常。我刚刚更新了我的答案并显示了全部代码。谢谢，显示和隐藏似乎并没有真正隐藏这个框。不过，我使用的切换选项确实有效。而且我似乎无法覆盖选择框的值。@user338413:代码在这里工作正常。我刚刚更新了我的答案，并显示了整个代码。