title: submit form without refresh page and load output into html
body: <p>I want to submit a form information to another php script without leaving the page and show the output in that same page. </p>
  
  <p>Here's my ajax function to load php output in html without leaving the page. It doesn't do that if my form has a submit button. It only works with a normal clickable button.</p>
  
  <pre><code>$('#btnLoad').click(function(){
  
      $.ajax({
          type: 'POST',
          url: 'page1.php',
          success: function(data){
                   if(data != null) $('#content').text(data);
           }
       });
  });
  </code></pre>
  
  <p>The problem is that I need to send POST variables to my PHP script but when I do, it goes to my PHP script page. I just want the script to receive the POST variables, run the script and then show the output in my HTML page. </p>
  
  <p>Here's the script that doesn't go to PHP script page. I don't know if the PHP script runs with this function.</p>
  
  <pre><code>$(function() {
      $('form#myForm').on('submit', function(e) {
          $.post('page1.php', $(this).serialize(), function (data) {
  
          }).error(function() {
  
          });
          e.preventDefault();
      });
  });
  </code></pre>
  
  <p>How can I combine these two scripts into one, to submit my variables via POST, run the script and show the output in my HTML page?</p>