[jQuery] how to auto-submit a form (when a select box changes) and load the response in the same page in a <div>
hi all!
greetings to everyone!
I am sorry if I missed the solution
of this problem given here already
but I searched for quite some time.
here is my problem
I have written a form with only a select box
which, when changed, should submit
its form and load the response from the
server in the same page under a specific
<div></div> so that the user doesn't have to navigate
away from that page when he wants to
change that select box again.
So far I am trying with a submit button
and when I click on submit after changing the
select box, it works.
code::
<script language='javascript'>
$(document).ready(function() {
var options = {
target: '#content', // target element(s) to
be updated with server response
beforeSubmit: function() { document.body.style.cursor
= 'wait'; }, // pre-submit callback
success: function() { document.body.style.cursor
= 'default'; } // post-submit callback
};
// bind to the form's submit event
$('form').submit(function() {
$(this).ajaxSubmit(options);
return false;
});
});
</script>
<div id='content' style='border:1px solid black'>
<form id="publicationform" id="publicationform" action="show.jsp"
method="POST">
<select name="publication" id="pubitemlist" >
......
<input type="submit" value="Select"/>
</form>
how can I make it work without the submit button?
(I have tried <select name="publication" id="pubitemlist"
onChange="this.form.submit();">
which causes it to load a new page
what I want is to load the response (page) in the <div> specified in
AJAX fashion!
Thanks in advance!
Regards,