Handling a form with jQuery and AJAX

I have tried many different methods of submitting my form with jQuery and AJAX, however, none of them seem to be working. The way it is coded right now makes it so that when the form is submitted, it redirects to my backend php script to display the开发者_Go百科 output.

What I want it to do is take this output from the backend script, and display it in a div on the page once the form has been submitted, without redirecting to another page. Here is the code as of right now:

Form and the div I want the results to go in

    <form method='post' action='serverManager.php' name='form1'>
        <input type='SUBMIT' value='GO' name='btnGo' onSubmit=document.form1.submit(); />
        <input type='HIDDEN' name='ACTION' value='GO' />
    </form>
    <div id="result"></div>

Ajax call

  $('input#btnGo').click( function() {
  $.ajax({
        url: 'serverManager.php',
        type: 'post',
        data: $('form#form1').serialize(),
        success: function(data) {
               $('#result').html(msg);
             }
   });
});

With this code it still redirects to the serverManager.php page with the job submission text on it. Any ideas how this can be fixed? I'm sure it's something that's not too difficult, but I've been stuck on this for quite a while now. Any help would be much appreciated.

I agree with Evan. There's no need to put onSubmit in the HTML because you are using AJAX call.

Also, I would suggest you have a look at the JQuery Ajax Form Plugin, which will make handling form a lot easier.

Link: http://jquery.malsup.com/form/

All you need to do is include the script in your HTML head, and do something like the following

$(document).ready(function() { 

      $('yourFormID').ajaxForm(function() { 
          alert("prepare your form to be submitted."); 
      }); 
       $('yourFormID').ajaxSubmit();
       return false;
}); 

you are using input#btnGo & form#form1 , remember # is refered to the id not to the name so you need to provide id also try this,

    <form method='post' action='serverManager.php' name='form1' id='form1'>
    <input type='SUBMIT' value='GO' name='btnGo' id='btnGo' />
    <input type='HIDDEN' name='ACTION' value='GO' />
    </form> 

    $('input#btnGo').click( function() {
          $.ajax({
             url: 'serverManager.php',
             type: 'post',
             data: $('form#form1').serialize(),
             success: function(data) {
                   $('#result').html(msg);
         });
     });

Remove onSubmit=document.form1.submit(); and change <input type='SUBMIT' to <input type='BUTTON'.

It's already taken care of with the jQuery.

Also, your form's name should be an ID.

modify this

<input type='SUBMIT' value='GO' name='btnGo' onSubmit=document.form1.submit(); />

to this

<input type='BUTTON' value='GO' name='btnGo' />

You didn't use the right trigger in your js.

Try something like this :

$('input#btnGo').submit(function(event) {
    event.preventDefault();  
    $.ajax({
        url: 'serverManager.php',
        type: 'post',
        data: $('form#form1').serialize(),
        success: function(data) {
           $('#result').html(msg);
         }
   });
});  

For example, you could prevent the submission of the form like this:

$("form[name='form1']").submit(function(evt){

   evt.preventDefault();

   $.ajax({
        url: 'serverManager.php',
        type: 'post',
        data: $('form#form1').serialize(),
        success: function(data) {
               $('#result').html(msg);
             }
   });
});