没有页面刷新的AJAX到PHP

I'm having some trouble getting my form to submit data to my PHP file.

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.

Any pointers in the right direction would be very much appreciated. Pulling my hair out over this one.

HTML

<form action='xxx.php' id='myForm' method='post'>
    <p>Your content</p> 
    <input type='text' name='content' id='content'/> 
    <input type='submit' id='subbutton' name='subbutton' value='Submit' /> 
</form>
<div id='message'></div>

JavaScript

<script>   
    $(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("<span style='color:green ! important'>Sending request.</br></br>");
                }
            });

        });
    });
</script>

A couple of small changes should get you up and running. First, get the value of the input with .val():

var content = $("#content").val();

You mention that you're checking to see if the submit button isset() but you never send its value to the PHP function. To do that you also need to get its value:

var submit = $('#subbutton').val();

Then, in your AJAX function specify the data correctly:

$.ajax({
    type: "POST",
    url: "xxx.php",
    data: {content:content, subbutton: submit}
    ...

quotes are not needed on the data attribute names.

On the PHP side you then check for the submit button like this -

if('submit' == $_POST['subbutton']) {
    // remainder of your code here

Content will be available in $_POST['content'].

Change the data atribute to

data:{
    content:$("#content").val()
}

Also add the atribute error to the ajax with

error:function(e){
   console.log(e);
 }

And try returning a var dump to $_POST in your php file.

And the most important add to the ajax the dataType atribute according to what You send :

dataType: "text" //text if You try with the var dump o json , whatever.

Another solution would be like :

  $.ajax({
   type: "POST",
   url: "xxxwebpage..ifyouknowhatimean",
   data: $("#idForm").serialize(), // serializes the form's elements.
   dataType:"text" or "json" // According to what you return in php
   success: function(data)
   {
       console.log(data); // show response from the php script.
   }
 });

Set the data type like this in your Ajax request: data: { content: content }

I think it isnt a correct JSON format.