Q:

send form via AJAX in jQuery then save in MySQL but doesn't work

as title, I am a beginner about website design.
Please never mind if I ask a stupid question.
while i send the form, it didnt work.
here is html:
  <form id="form1" name="form1" action="toSQL.php" method="POST" accept-charset="utf-8">
  <input type="text" name="Cliname" id="textfield" maxlength = "10" />
  <textarea name="message" id="message"  rows="3" maxlength = "20" ></textarea>
  <input type="submit" value="submit" id="submit" />
  </form>
  <div class="alert"></div>

and here is js:
<script type="text/javascript">
$(document).ready(function() {
   var form = $(this) ;
   var submited = $('#submit') ;
   var alerted = $('.alert') ;

   form.on( 'submit', this, (function(event) {      
       event.preventDefault();
       if ( $.trim($form.find('input[name="Cliname"]').val()) == "" || $.trim($form.find('input[name="message"]').val()) == "" ) {
           alert( "please enter!!" ) ;
           return ;
       }
       else {
           $.ajax({
               url: 'toSQL.php', // form action url
               type: 'POST', // form submit method get/post
               dataType: 'html', // request type html/json/xml
               data: form.serialize(), // serialize form data 
               beforeSend: function() {
                   alerted.fadeOut();
               },
               success: function(data) {
                   alerted.html(data).fadeIn(); // fade in response data
                   form.trigger('reset'); // reset form
               },
               error: function(e) {
                   console.log(e)
               }
           });
       }
   }));
});
</script>

server side php:
<?php  
if( isset( $_SERVER['HTTP_X_REQUESTED_WITH'] ) ){
  if (isset($_POST['Cliname']) AND isset($_POST['message'])) {
    $name = filter_var($_POST['name'], FILTER_SANITIZE_STRING);
    $message = filter_var($_POST['message'], FILTER_SANITIZE_STRING);

    if (send($name, $message)) {
      echo 'Message sent!';
    } else {
      echo 'Message couldn\'t sent!';
    }
  }
  else {
    echo 'All Fields are required';
  }
  return;
}

function send( $name, $message ) {
    $time = date("Y-m-d H:i:s"); 
    $mysqlConnection=mysql_connect("localhost", 'root', '') or die("connect error!");

    mysql_select_db('test') or die ("db error!");  

    $queryStr="INSERT INTO fortest (time, message, name)
    VALUES ( '$time', '$message', '$name')";
    mysql_query($queryStr,$mysqlConnection) or die(mysql_error());
    return true ;
}
?>

here is the website i reference : http://www.w3bees.com/2013/08/submit-form-without-page-refresh-with.html
Did i miss something?

A:

As a couple people have mentioned already, you are trying to serialize your entire dom object, which isn't going to work. Change it to var form = $("#form1") and it should work.
I recommend you open the webpage in chrome dev tools and click the network tab, click preserve log and then submit the form. When it is submitted you'll see the full headers that were sent to the server and can verify it works correctly to help narrow down the problem

