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

Question

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?

Shouldn't it be - var form = $("#form1") instead of $(this)? — ron tornambe
– ron tornambe, Commented Aug 11, 2014 at 18:13
Try replacing var form = $(this); with var form = $("#form1"); — SuperAzeem
– SuperAzeem, Commented Aug 11, 2014 at 18:13

Matt Bucci · Accepted Answer · 2014-08-11 18:15:13Z

1

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

answered Aug 11, 2014 at 18:15

Matt Bucci

2,1402 gold badges16 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user3927463 Over a year ago

thanks a lot!! i didn't know this tools before, it really helps me!!

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related