title: AJAX to PHP without page refresh
body: <p>I'm having some trouble getting my form to submit data to my PHP file. </p>
  
  <p>Without the AJAX script that I have, the form takes the user through to 'xxx.php' and submits the data on the database, however when I include this script, it prevents the page from refreshing, displays the success message, and fades in 'myDiv' but then no data appears in the database.</p>
  
  <p>Any pointers in the right direction would be very much appreciated. Pulling my hair out over this one.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;form action='xxx.php' id='myForm' method='post'&gt;
      &lt;p&gt;Your content&lt;/p&gt; 
      &lt;input type='text' name='content' id='content'/&gt; 
      &lt;input type='submit' id='subbutton' name='subbutton' value='Submit' /&gt; 
  &lt;/form&gt;
  &lt;div id='message'&gt;&lt;/div&gt;
  </code></pre>
  
  <p>JavaScript</p>
  
  <pre><code>&lt;script&gt;   
      $(document).ready(function(){
          $("#subbutton").click(function(e){
              e.preventDefault();
              var content = $("#content").attr('value');
  
              $.ajax({
                  type: "POST",
                  url: "xxx.php",
                  data: "content="+content,
                  success: function(html){   
                      $(".myDiv").fadeTo(500, 1);
                  },
                  beforeSend:function(){
                      $("#message").html("&lt;span style='color:green ! important'&gt;Sending request.&lt;/br&gt;&lt;/br&gt;");
                  }
              });
  
          });
      });
  &lt;/script&gt;
  </code></pre>