jQuery 如何在选择更改时提交表单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28122019/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to Submit Form on Select Change
提问by Rick Helston
I have the following form. I'd like it to be submitted automatically via jQuery when the user makes a selection, without needing to press the submit button. How do I do this?
我有以下表格。我希望在用户进行选择时通过 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, I tried your suggestion but it's still not working. Here's the complete code, anything wrong?
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>
采纳答案by Sigismundus
Your form is missing an action value, which prevents submitting the form at the end. But in the mid-time you should correct this code:
您的表单缺少操作值，这会阻止在最后提交表单。但在中途您应该更正此代码：
$(document).ready(function() {
$('#cars').on('change', function() {
document.forms[myFormName].submit();
});
});
You can also submit a form by triggering submit button click event:
您还可以通过触发提交按钮单击事件来提交表单：
$(document).ready(function() {
$('#cars').on('change', function() {
var $form = $(this).closest('form');
$form.find('input[type=submit]').click();
});
});
回答by Oskar
In my case, this works perfectly well, and it works with or without the submit button.
就我而言，这非常有效，无论有没有提交按钮都可以使用。
<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>
回答by Dan Sinclair
I know this is a bit old (and already answered), but none of the answers was quite as flexible as I wanted, so below is the solution I ended up with:
我知道这有点旧（并且已经回答了），但是没有一个答案像我想要的那样灵活，所以下面是我最终得到的解决方案：
$(document).ready(function() {
$('#cars').change(function() {
var parentForm = $(this).closest("form");
if (parentForm && parentForm.length > 0)
parentForm.submit();
});
});
回答by larrytech
An even quicker version of the code would look something like.
代码的更快版本看起来像这样。
<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>
Now what we are doing is adding
onchange="javascript:this.form.submit()"to any field that you want the submit action to fire on. Of course this only works on elements that support the onchangehtml property
现在我们正在做的是添加
onchange="javascript:this.form.submit()"到您希望提交操作触发的任何字段。当然，这只适用于支持onchangehtml 属性的元素
回答by praveenraj
even you can do this one:
即使你可以做到这一点：
<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();
});
});
回答by Asad Ullah
Just use assistance of JavaScript.
只需使用 JavaScript 的帮助。
<select onchange="this.form.submit()">
...
</select>
回答by Semih Can Bilgen
My solution is create hidden submit button and click it on change event .
我的解决方案是创建隐藏的提交按钮并在更改事件上单击它。
<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"/>
