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 and should use a modern replacement. You are also vulnerable to SQL injection attacks (addslashes is insufficient) that a modern API would make it easier to defend yourself from. — Quentin
– Quentin, Commented Mar 19, 2014 at 11:03
@AbhikChakraborty — Won't do any good since it isn't a jQuery event handler. — Quentin
– Quentin, Commented Mar 19, 2014 at 11:04
@Quentin Yeah he is using the onsubmit so yes return false should do the trick. — Abhik Chakraborty
– Abhik Chakraborty, Commented Mar 19, 2014 at 11:05

Dexter · Accepted Answer · 2014-03-19 11:12:31Z

2

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

answered Mar 19, 2014 at 11:12

Dexter

1,7964 gold badges27 silver badges55 bronze badges

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

Comments

Quentin · Accepted Answer · 2014-03-19 11:03:44Z

1

return false from your event handler function.

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

Consider moving to modern methods of event binding.

answered Mar 19, 2014 at 11:03

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Comments

Sadok SFAR · Accepted Answer · 2014-03-19 11:08:05Z

0

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

});

answered Mar 19, 2014 at 11:08

Sadok SFAR

3092 silver badges6 bronze badges

Collectives™ on Stack Overflow

How to insert into mysql table using ajax?

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related