如何在 Select 更改时提交表格
How to Submit Form on Select Change
我有以下表格。我希望它在用户进行选择时通过 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>
您的表单缺少操作值,这会导致无法在最后提交表单。但是在中途你应该更正这个代码:
$(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();
});
});
即使你可以做到这一点:
<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();
});
});
就我而言,这非常有效,无论有没有提交按钮,它都可以正常工作。
<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>
我知道这有点过时(并且已经回答了),但是 none 的答案非常灵活,正如我想要的那样,所以下面是我最终得到的解决方案:
$(document).ready(function() {
$('#cars').change(function() {
var parentForm = $(this).closest("form");
if (parentForm && parentForm.length > 0)
parentForm.submit();
});
});
代码的更快版本看起来像这样。
<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 属性
的元素
只需使用 JavaScript.
的帮助
<select onchange="this.form.submit()">
...
</select>
我的解决方案是创建隐藏的提交按钮并在更改事件时单击它。
<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"/>
我有以下表格。我希望它在用户进行选择时通过 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>
您的表单缺少操作值,这会导致无法在最后提交表单。但是在中途你应该更正这个代码:
$(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();
});
});
即使你可以做到这一点:
<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();
});
});
就我而言,这非常有效,无论有没有提交按钮,它都可以正常工作。
<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>
我知道这有点过时(并且已经回答了),但是 none 的答案非常灵活,正如我想要的那样,所以下面是我最终得到的解决方案:
$(document).ready(function() {
$('#cars').change(function() {
var parentForm = $(this).closest("form");
if (parentForm && parentForm.length > 0)
parentForm.submit();
});
});
代码的更快版本看起来像这样。
<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 属性
只需使用 JavaScript.
的帮助<select onchange="this.form.submit()">
...
</select>
我的解决方案是创建隐藏的提交按钮并在更改事件时单击它。
<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"/>