如何提交选择变更表格

问题描述 投票:0回答:8

我有以下表格。我希望当用户做出选择时通过 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
8个回答
22
投票

您的表单缺少操作值,这导致最终无法提交表单。但在中期你应该更正这段代码:

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

10
投票

就我而言,这效果非常好,无论有没有提交按钮都可以。

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

8
投票

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

<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 属性

的元素

7
投票

只需使用 JavaScript 的帮助即可。

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

3
投票

我知道这有点旧(并且已经回答了),但是没有一个答案像我想要的那么灵活,所以下面是我最终得到的解决方案:

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

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> 
<input id='submit' type="submit" name="submit" value="Submit">

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

   });
});

0
投票

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

 <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"/>

0
投票

我的代码使用 jquery 提交表单,没有提交按钮,并且选择元素上有更改事件:

<script>
$(function () {
    $("#select123").on("change", function() {
        $(this).closest('form').submit();
    });
});
</script>
© www.soinside.com 2019 - 2024. All rights reserved.