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++;
}

http://stackoverflow.com/questions/6462143/prevent-default-on-form-submit-jquery — steven, Mar 30 '16 at 16:01

score 1 · Answer 1 · answered Mar 30 '16 at 17:02

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();

answered Mar 30 '16 at 17:02

Hiren patel

971
8
25

@HTT you can accept an answer by clicking around upvote counts. – Hiren patel Mar 31 '16 at 16:36
Can you tell me know where it is? – HTT Apr 01 '16 at 04:32
@HTT see this answer to understand , how accepting an answer works. http://meta.stackexchange.com/a/5235 – Hiren patel Apr 01 '16 at 10:53
@HTT you didn't get it ? – Hiren patel Apr 02 '16 at 14:05

score 0 · Answer 2 · answered Mar 30 '16 at 16:01

0

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');
    }
  });
});

answered Mar 30 '16 at 16:01

SiCK

367
4
15

I did add event.preventDefault(). But it's can't work – HTT Mar 30 '16 at 16:07

dmeleshko · Answer 3 · 2016-03-31T05:34:39.757

0

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));
}

edited Mar 31 '16 at 05:34

answered Mar 30 '16 at 16:23

dmeleshko

31
5

how to return valid json? – HTT Mar 30 '16 at 16:29
use echo '{"result":"1"}'; instead of echo "1"; in your ajax_insert.php – dmeleshko Mar 30 '16 at 16:33
like this : if($result) { echo '{"result":"1"}'; }. It isn't work – HTT Mar 30 '16 at 16:38
Sorry, i missed that echo actually runs two times, so, it returns not valid json. If you remove echo from the cycle and insert it at the end of script everything must works. But you need some kind of error handling when you insert data. Something like if (!$result) { echo json_encode(array('result'=>0)); exit;} and in success callback you can test if data.result is 1 or 0 end do what you want – dmeleshko Mar 30 '16 at 16:53

Inserting into Mysql form php with Ajax without reload page

3 Answers3