如何使Web表单在下拉选项中自动提交

时间:2011-03-17 16:02:17

标签: javascript jquery webforms form-submit

我的页面中有一个表格,如下图所示;

<form name="testform" id="testform" action="test.php" method="get">
  <input name="field1" id="field1" type="text" value="">
  <input name="field2" id="field2" type="text" value="">
  <select name="dropdown" id="dropdown">
    <option value="option1" selected="selected">option1</option>
    <option value="option2">option2</option>
    <option value="option3">option3</option>
  </select>
  <input type="submit" name="Submit" value="Submit" id="Submit">
</form>

当用户从下拉菜单中选择一个选项时,我希望自动提交表单。如何使用或不使用JavaScript(使用或不使用jQuery)?

提前致谢... :)

blasteralfred

4 个答案:

答案 0 :(得分:10)

点击(或选择)?在这种情况下,用户将无法进行任何选择。您可能意味着只要选择了另一个选项。如果是的话

<select name="dropdown" id="dropdown" onchange="this.form.submit()">

如果正在使用jQuery,则应使用不显眼的事件处理程序change,而不是内联javascript。

$(function(){
    $("#dropdown").change( function(e) {
        this.form.submit();
    });
});

如果在DOM中动态添加表单元素,请使用on

$(function(){
    $('#testform').on( "change", "#dropdown", function(e) {
        this.form.submit();
    });
});

答案 1 :(得分:7)

您需要使用jQuery change()事件。

('#dropdown').change( function() { ('#testform').submit(); })

答案 2 :(得分:3)

我认为

$('#dropdown').change(function () { $('Submit').click(); } );

会做到这一点!

答案 3 :(得分:0)

这里回答

<form name="testform" id="testform" action="test.php" method="get">
              <input name="field1" id="field1" type="text" value="">
              <input name="field2" id="field2" type="text" value="">
              <select name="dropdown" id="dropdown" onChange="document.testform.submit()">
            <option value="option1" selected="selected">option1</option>
            <option value="option2">option2</option>
            <option value="option3">option3</option>
            </select>
  </form>