Inserting into Mysql form php with Ajax without reload page

Question

I have this jQuery AJAX code that into Mysql form php. It works without reloading the page. The problem is that it When the user enters something into the form, then clicks submit, I would like to use php and ajax (with jquery). But it do not print the string in alert() . Can someone please show me how this can be achieved?

HTML :

<form id="students" method="post">
   <div class="row">
      <input name="a[]" value="" type="text" >
      <input name="b[]" value="" type="text"  >
   </div>
   <div class="row">
      <input name="a[]" value="" type="text" >
      <input name="b[]" value="" type="text"  >
   </div>
   <input type="submit" value="submit" id="submitbutton" class="insert"/>
</form>


<script type="text/javascript">
 $('#students').submit(function(){
    event.preventDefault();
    $.ajax({
      type: 'POST',
      url: 'ajax_insert.php',
      data: $('#students').serialize(),
      dataType: 'JSON',
      success: function(data) {
          alert('form has been posted successfully');
      }
    });
 });
</script>

and ajax_insert.php :

$a1=$_POST['a'];
$b1=$_POST['b'];

//$query_values = array();
$index=0;

foreach($a1 as $s){
   $sql = "INSERT INTO test_data(a,b) VALUES('$s','".$b1[$index]."')";

   $result = mysql_query($sql);
   if($result)
   {
     echo "1";
   }
   $index++;
}

Answer 1

$('#students').submit(function(event){
    event.preventDefault();
    $.ajax({
    type: 'POST',
    url: 'ajax_insert.php',
    data: $('#students').serialize(),
    dataType: 'JSON',
    success: function(data) {
    alert('form has been posted successfully');
  }
 });

check official document here and learn how to use event.preventDefault();

Answer 2

You probably have to event.preventDefault(); in the submit event callback :

$('#students').submit(function(){
  event.preventDefault();
  $.ajax({
    type: 'POST',
    url: 'ajax_insert.php',
    data: $('#students').serialize(),
    dataType: 'JSON',
    success: function(data) {
      alert('form has been posted successfully');
    }
  });
});

Answer 3

You need return valid json when use dataType: "json" in $.ajax call

Or you can use dataType: "html" without rewriting php code

Update (examples of code, that should work):

in HTML:

<script type="text/javascript">
  $('#students').submit(function(e){
    e.preventDefault();
    $.ajax({
      type: 'POST',
      url: 'ajax_insert.php',
      data: $('#students').serialize(),
      dataType: 'JSON',
      success: function(data) {
          if(data.result == 1) {
              alert('form has been posted successfully');
          } else {
              alert(data.error);
          }
      }
    });
 });
</script>

ajax_insert.php

$a1=$_POST['a'];
$b1=$_POST['b'];

//$query_values = array();
$index=0;
$errors = array();

foreach($a1 as $s){
   $sql = "INSERT INTO test_data(a,b) VALUES('$s','".$b1[$index]."')";

   $result = mysql_query($sql);
   if(!$result)
   {
     $errors[] = "\"$sql\"";
   }
   $index++;
}

if(!empty($errors)) {
   echo json_encode(array('result'=>0,'error'=>"Error executing following queries: \n".implode("\n", $errors)));
} else {
   echo json_encode(array('result'=>1));
}