How to insert into mysql table using ajax?

Question

I want to insert data into table using ajax so data will insert without reload of page.

This code insert data into table very well but code also reload the page.

But I want insert without reloading of page.

How can i do this ?

<?php
include('connection.php');
if(isset($_POST['cmt'])){
    $comment = addslashes($_POST['cmt']);
    $alertid = $_POST['alert_id'];
    mysql_query("INSERT INTO `comments` (`id`, `alert_id`, `comment`, `username`) VALUES (NULL, '".$alertid."', '".$comment."', 'tomas')");
}
?>


<script>
  function submitform(){
    var comment = $("#comment").val();
    var alertid = $("#alertid").val();
    $.ajax({
        type: "POST",
        //url: "ana.php",
        data:{cmt:comment,alert_id:alertid}
    }).done(function( result ) {
        $("#msg").html( result );
    });

  }
</script>

<form method = "POST" onsubmit = "submitform()">
   <textarea onFocus = "myFunction(1)" onBlur = "myFunction(0)" style="margin: 0px 0px 8.99305534362793px; width: 570px; height: 50px;" rows = "6" cols = "40" id = "comment"></textarea><br />
   <input type = "text" placeholder="Enter Maximium 100 Words" id = "alertid" value = "10">
   <input  type = "submit" name = "submit" value = "Comment">
</form>

**Danger**: You are using [an **obsolete** database API](http://stackoverflow.com/q/12859942/19068) and should use a [modern replacement](http://php.net/manual/en/mysqlinfo.api.choosing.php). You are also **vulnerable to [SQL injection attacks](http://bobby-tables.com/)** (`addslashes` is insufficient) that a modern API would make it easier to [defend](http://stackoverflow.com/questions/60174/best-way-to-prevent-sql-injection-in-php) yourself from. — Quentin, Mar 19 '14 at 11:03
@AbhikChakraborty — Won't do any good since it isn't a jQuery event handler. — Quentin, Mar 19 '14 at 11:04
@Quentin Yeah he is using the onsubmit so yes return false should do the trick. — Abhik Chakraborty, Mar 19 '14 at 11:05

score 2 · Accepted Answer · answered Mar 19 '14 at 11:12

try this add this to form onsubmit = "return submitform();"

 function submitform(){
    var comment = $("#comment").val();
    var alertid = $("#alertid").val();
    $.ajax({
        type: "POST",
        //url: "ana.php",
        data:{cmt:comment,alert_id:alertid}
    }).done(function( result ) {
        $("#msg").html( result );
    });
    return false;
  }

score 1 · Answer 2 · answered Mar 19 '14 at 11:03

1

return false from your event handler function.

onsubmit="submitform(); return false;">

Consider moving to modern methods of event binding.

answered Mar 19 '14 at 11:03

Quentin

914,110
126
1,211
1,335

score 0 · Answer 3 · answered Mar 19 '14 at 11:08

You have to create a php file that insert into your table the posted data and call it with ajax like that :

$.ajax({
url: "/file.php",
type: "POST",
cache: false,
dataType: "json",
data: postValue,
success: function(results) {
    bootbox.alert(results.message, function() {
        bootbox.setIcons(null);
        window.location.reload();
    });
},
error: function(results) {
    bootbox.alert(results.message, function() {
        bootbox.setIcons(null);
    });
}

});

How to insert into mysql table using ajax?

3 Answers3

Linked