title: Handling a form with jQuery and AJAX
body: <p>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 output.</p>
  
  <p>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:</p>
  
  <p>Form and the div I want the results to go in</p>
  
  <pre><code>    &lt;form method='post' action='serverManager.php' name='form1'&gt;
          &lt;input type='SUBMIT' value='GO' name='btnGo' onSubmit=document.form1.submit(); /&gt;
          &lt;input type='HIDDEN' name='ACTION' value='GO' /&gt;
      &lt;/form&gt;
      &lt;div id="result"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Ajax call</p>
  
  <pre><code>  $('input#btnGo').click( function() {
    $.ajax({
          url: 'serverManager.php',
          type: 'post',
          data: $('form#form1').serialize(),
          success: function(data) {
                 $('#result').html(msg);
               }
     });
  });
  </code></pre>
  
  <p>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.</p>