Reputation: 10376
I have the following which calls another file and spits output based on the dropdown value. It works fine except I can't seem to get it to work correctly without a submit button. This works except it will redirect itself to process.php
with the correct output. The whole point of this code is to display the output within the empty div (output
).
$(document).ready(function() {
$('#dropdown').change( function() {
$('#myform').submit();
$.ajax({ // create an AJAX call...
data: $(this).serialize(), // get the form data
type: $(this).attr('method'), // GET or POST
url: $(this).attr('action'), // the file to call
success: function(response) { // on success..
$('#output').html(response); // update the DIV
}
});
return false; // cancel original event to prevent form submitting
});
});
<form id="myform" method=POST action="process.php">
<select id="dropdown" name="dropdown">
<option value="QU">QU</option>
<option value="QF">QF</option>
<option value="QC">QC</option>
</select>
</form>
<div id="output"></div>
Upvotes: 3
Views: 11416
Reputation: 74748
You have to do it this way:
What this is doing:
prevDef()
Then your ajax call which submits the value
and process it to process.php
and the output response on process.php gets loaded
in the #output div
$(document).ready(function() {
$('#dropdown').change( function() {
$.ajax({ // create an AJAX call...
data: $(this).serialize(), // get the form data
type: $(this).attr('method'), // GET or POST
url: $(this).attr('action'), // the file to call
success: function(response) { // on success..
$('#output').html(response); // update the DIV
}
});
});
});
Upvotes: 0
Reputation: 88
I think the JQuery load function can do what you are after in less code.
$(document).ready(function() {
$('#dropdown').change( function() {
$('#output').load('/process.php',{dropdown: $(this).val()});
});
});
<select id="dropdown" name="dropdown">
<option value="QU">QU</option>
<option value="QF">QF</option>
<option value="QC">QC</option>
</select>
Upvotes: 5
Reputation: 97727
If you want to use ajax then don't submit the form, also in the dropdown change event this
is the dropdown element not the form.
$(document).ready(function() {
$('#dropdown').change( function() {
$.ajax({ // create an AJAX call...
data: $('#myform').serialize(), // serialize the form
type: $('#myform').attr('method'), // GET or POST from the form
url: $('#myform').attr('action'), // the file to call from the form
success: function(response) { // on success..
$('#output').html(response); // update the DIV
}
});
});
});
Upvotes: 6