[jQuery] how to auto-submit a form (when a select box changes) and load the response in the same page in a

[skywalker]

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,