如何提交选择更改表格答案

【问题标题】：How to Submit Form on Select Change如何提交选择更改表格
【发布时间】：2015-03-23 04:58:25
【问题描述】：

我有以下表格。我希望它在用户进行选择时通过 jQuery 自动提交，而无需按下提交按钮。我该怎么做？

<form action="" method="post">
    <select name="id" id="cars">
        <option value="">Choose</option>
        <option value="1">Toyota</option>
        <option value="2">Nissan</option>
        <option value="3">Dodge</option>
    </select> 
    <input type="submit" name="submit" value="Submit">
</form>

adeneo，我尝试了您的建议，但仍然无法正常工作。这是完整的代码，有什么问题吗？

<!doctype html>
<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
        <script type="text/javascript">
        $(document).ready(function() {
            $('#cars').on('change', function() {
                this.form.submit();
            });
        });
        </script>
    </head>
    <body>
        <form action="" method="post">
            <select name="id" id="cars">
                <option value="">Select...</option>
                <option value="1">Toyota</option>
                <option value="2">Nissan</option>
                <option value="3">Dodge</option>
            </select> 
            <input type="submit" name="submit" value="Submit">
        </form>
    </body>
</html>

【问题讨论】：

标签： jquery forms select submit

【解决方案1】：

您的表单缺少操作值，这会阻止最后提交表单。但是在中间你应该更正这段代码：

$(document).ready(function() {
  $('#cars').on('change', function() {
     document.forms[myFormName].submit();
  });
});

也可以通过触发提交按钮点击事件来提交表单：

$(document).ready(function() {
  $('#cars').on('change', function() {
    var $form = $(this).closest('form');
    $form.find('input[type=submit]').click();
  });
});

【讨论】：

我把它改成action="page.php" 也就是页面的名字，还是没有提交表单。
我列出了两个可行的解决方案，如果有帮助请告诉我。
我就是这样做的（多亏了上面。） - $("#areaSelected").on("change", function () { $('#search').click() ; });我在页面上有一个名为“搜索”的“提交”按钮，它是从“onchange”触发的。
一个空操作值将表单提交到它所在的页面。

【解决方案2】：

在我的例子中，这很好用，无论有没有提交按钮都可以。

<form action="" method="post">
    <select name="id" id="cars">
        <option value="">Choose</option>
        <option value="1">Toyota</option>
        <option value="2">Nissan</option>
        <option value="3">Dodge</option>
    </select> 
</form>

 <script type="text/javascript">

  jQuery(function() {
    jQuery('#car').change(function() {
        this.form.submit();
    });
});
</script>

【讨论】：

在 CoffeeScript 中为我工作，但我使用的是 $('#car').change ->。

【解决方案3】：

更快的代码版本看起来像这样。

<form action="" method="post">
    <select name="id" id="cars" onchange="javascript:this.form.submit()">
        <option value="">Choose</option>
        <option value="1">Toyota</option>
        <option value="2">Nissan</option>
        <option value="3">Dodge</option>
    </select> 
    <input type="submit" name="submit" value="Submit">
</form>

现在我们正在做的是添加 onchange="javascript:this.form.submit()" 到您希望提交操作触发的任何字段。当然这只适用于支持 onchange html 属性

的元素

【讨论】：

我也认为你可以将它用于任何触发动作的属性
没有太多理由为此使用jQuery，我使用这种方法，除非有人强迫我使用jQuery。

【解决方案4】：

只需使用 JavaScript 的帮助。

<select onchange="this.form.submit()">
    ...
</select>

【讨论】：

【解决方案5】：

我知道这有点老了（并且已经回答了），但是没有一个答案像我想要的那样灵活，所以下面是我最终得到的解决方案：

$(document).ready(function() {
   $('#cars').change(function() {
     var parentForm = $(this).closest("form");
     if (parentForm && parentForm.length > 0)
       parentForm.submit();
   });
});

【讨论】：

【解决方案6】：

即使你也可以做到这一点：

<form action="" method="post">
<select name="id" id="cars">
    <option value="">Choose</option>
    <option value="1">Toyota</option>
    <option value="2">Nissan</option>
    <option value="3">Dodge</option>
</select> 
<input id='submit' type="submit" name="submit" value="Submit">

$(document).ready(function() {
   $('#cars').on('change', function() {
     $('#submit').click();

   });
});

【讨论】：

【解决方案7】：

我的解决方案是创建隐藏的提交按钮并在更改事件上单击它。

 <select name="id" onchange="javascript:$('#submit').click();">
 <option value="0">Please Select Web Site</option>
 <option value="1">------</option>
 <option value="2">-------</option>
 </select>
 <button id="submit" class="hidden" type="submit" name="submit" value="Submit"/>

【讨论】：