问题
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?
<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?
<!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>
回答1:
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();
});
});
回答2:
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>
回答3:
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 onchange html property
回答4:
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();
});
});
回答5:
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();
});
});
回答6:
Just use assistance of JavaScript.
<select onchange="this.form.submit()">
...
</select>
回答7:
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"/>
来源:https://stackoverflow.com/questions/28122019/how-to-submit-form-on-select-change