how to insert data with ajax and php without page refresh

Question

I real need your help since I'm a beginner in php and Ajax. My problem is that, I can not send data in the database via my appended form in post.php, also when the button of id #reply clicked it sends empty data to database by refreshing the page. When the reply link is pressed I only get the Result of reply link to be shown without other information (name and comment). I need your help to make my appanded form to be able to add/send data to the database without refreshing the page, I also need to disable the form from index.php to make replies when the reply button / link is pressed. Thank you.

post.php

<?php      include("config.php"); //inserting
$action=$_POST["action"];
 if($action=="addcomment"){
      $author = $_POST['name'];
      $comment_body = $_POST['comment_body'];
      $parent_id = $_POST['parent_id'];
  $q = "INSERT INTO nested (author, comment, parent_id) VALUES ('$author', '$comment_body', $parent_id)";
  $r = mysqli_query($conn, $q);
if(mysqli_affected_rows($conn)==1) { header("location:index.php");}
else { }
}   
// showing data  
error_reporting( ~E_NOTICE ); 
function getComments($conn, $row) {
$action=$_POST["action"];
 if($action=="showcomment"){  $id = $row['id'];
    echo "<li class='comment'><div class='aut'>".$row['author']."</div><div class='comment-body'>".$row['comment']."</div>";
    echo "<a href='#comment_fo' class='reply' id='".$row['id']."'>Reply</a>";
$result = mysqli_query($conn, "SELECT * FROM `nested` WHERE parent_id = '$id' ORDER BY `id` DESC"); 
}
if(mysqli_num_rows($result)>0) { echo "<ul>";
    while($row = mysqli_fetch_assoc($result)) { getComments($conn,$row);        }
      echo "</ul>"; } echo "</li>";
}   
 if($action=="showcomment"){
$q = "SELECT * FROM nested WHERE parent_id = '".$row['id']."' ORDER BY `id` DESC";
$r = mysqli_query($conn, $q);
   while($row = mysqli_fetch_assoc($r)){ getComments($conn,$row); }
}
?>
<!DOCTYPE HTML><head><script type='text/javascript'>
$(document).ready(function(){
    $("a.reply").one("click", function() {
        var id = $(this).attr("id");
        var parent = $(this).parent();
      $("#parent_id").attr("value", id);
parent.append(" <br /><div id='form'><form><input type='text' name='name' id='name'><textarea name='comment_body' id='comment_body'></textarea><input type='hidden' name='parent_id' id='parent_id' value='0'><button id='reply'>Reply</button></form></div>");  
     $("#reply").click(function(){
        var name=$("#name").val();
        var comment_body=$("#comment_body").val();
        var parent_id=$("#parent_id").val();
           $.ajax({
                 type:"post",
                 url:"post.php",
                 data:"name="+name+"&comment_body="+comment_body+"&parent_id="+parent_id+"&action=addcomment",
                    success:function(data){ showComment(); }
                 });
              });
     });        
 });
 </script></head></html>

//index.php

<html><head><script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
function showComment(){
    $.ajax({
       type:"post",
       url:"post.php",
       data:"action=showcomment",
           success:function(data){ $("#comment").html(data); }
         });
   }
  showComment();
$(document).ready(function(){
   $("#button").click(function(){
        var name=$("#name").val();
        var comment_body=$("#comment_body").val();
        var parent_id=$("#parent_id").val();
           $.ajax({
                 type:"post",
                 url:"post.php",
                 data:"name="+name+"&comment_body="+comment_body+"&parent_id="+parent_id+"&action=addcomment",
                    success:function(data){
                 showComment();             
                     }
                 });
             });
});
</script></head><body>
<form id="form_comment">
  <input type="text" name="name" id='name'/>
  <textarea name="comment_body" id='comment_body'></textarea>
  <input type='hidden' name='parent_id' id='parent_id' value='0'/>
  <input type="button" id="button" value="Comment"/>
</form>
<div id="comment"></div> </body></html>

Your script is vulnerable to SQL injection. Before continuing with this you should learn about PDO, prepared statements and how to filter user input. — JasonBoss
– JasonBoss, Commented Apr 18, 2017 at 15:22
Its true, Thank your advice. JasonBoss. But, please help me with this. — martin
– martin, Commented Apr 18, 2017 at 15:26

Genina Anne Gabuten · Accepted Answer · 2017-04-18 15:52:25Z

1

$(document).ready(function(){
  $("#button").click(function(e){
      e.preventDefault();  //add this line to prevent reload
      var name=$("#name").val();
      var comment_body=$("#comment_body").val();
      var parent_id=$("#parent_id").val();
      $.ajax({
             type:"post",
             url:"post.php",
             data:"name="+name+"&comment_body="+comment_body+"&parent_id="+parent_id+"&action=addcomment",
                success:function(data){
             showComment();             
                 }
             });
         });
});

answered Apr 18, 2017 at 15:52

Genina Anne Gabuten

2783 silver badges14 bronze badges

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

24 Comments

martin Over a year ago

Thank you, But how about $("#reply").click(function(){ } ? because I'm having problem there

Genina Anne Gabuten Over a year ago

same put $("#reply").click(function(e){ e.preventDefault(); }

martin Over a year ago

I did it to both pages tp prevent the default submission, but nothing has changed, Im still getting null results, I mean the comment work perfect, but the problem is on repy form

Genina Anne Gabuten Over a year ago

Try alert(name + comment_body + parent_id) before your ajax call if you will get any value

Genina Anne Gabuten Over a year ago

any feedback? are you getting any alert?

|

blackandorangecat · Accepted Answer · 2017-04-18 16:08:28Z

0

Here is a simple incomplete ajax example.

FromPage.php

Here is the ajax that I'd use. The variables can be set however you like.

<script type="text/javascript">
        var cars = ["Saab", "Volvo", "BMW"];
        var name = "John Smith";

        $.ajax({
                url: 'toDB.php',
                type: 'post',
                dataType: 'html',
                data: {
                        carArray: cars, 
                        firstName: name 
                },
                success: function(data) {
                        console.log(data); //Testing
                }
        });

</script>

toDB.ph

This is the second page - the one that writes the values to the database etc.

<?php
    $cars = $_POST['carArray'];
    $FirstName=$_POST['firstName'];

    //Used to test - it will print out the array
    print("<pre>");
    print_r($cars);
    print("</pre>");

    //Do something with $cars array and $FirstName variable
?>

edited Apr 18, 2017 at 16:08

answered Apr 18, 2017 at 15:31

blackandorangecat

1,3426 gold badges19 silver badges43 bronze badges

1 Comment

martin Over a year ago

Thank you. All you can see I'm trying to call the form from the file that arleady called via ajax, So, I want to make it function by sending data to the database using the appended form in post.php

Collectives™ on Stack Overflow

how to insert data with ajax and php without page refresh

2 Answers 2

24 Comments

FromPage.php

toDB.ph

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

24 Comments

FromPage.php

toDB.ph

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related