Question

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

<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();
}

当用户选择“其他”时，会显示文本字段以供他们输入原因。我希望这个原因在用户提交表单时覆盖“其他”。但是这个代码没有发生。有什么建议吗？

Answer 1

xar的答案有一些很好的功能，但是当选择“其他”时，它没有实现用#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>

Answer 2

<html>
<head>
    <script type="text/javascript" src="scripts/jquery.js"></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()); 


                  } 
            });
        });
    </script>
</head>
<body>
    <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>
</body>
</html>

基本上它的作用是：

当下拉列表发生变化时，请评估该值。如果它是“其他”然后显示文本框，否则隐藏它。

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

我猜代码很容易理解。希望这会有所帮助。

<强> EDITED

Answer 3

function SubmitForm() {
  if ($('#i_n_r_reason').val()=='Other')
    ('#i_n_r_reason').val = ('#other_reason').val
  ('#account_form').submit();
}

是您当前代码的精确副本吗？还是快速改写？有很多东西不见了！

我不确定您是否可以将选择框的值设置为不可选的内容。您可以做的是有一个隐藏字段，用于存储选择的值或额外文本框的值。

所以在你的选择的change（）函数中。使用类似以下内容将隐藏字段的值设置为选择的值：

$('#MyHiddenField').val($(this).val());

并在表单提交功能中执行以下操作：

if ($('#i_n_r_reason').val()=='Other'){
 $('#MyHiddenField').val($('#MyHiddenField').val());
}

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

3 个答案: