Displaying a success message after form submission

Question

I'm trying to understand jquery and particularly inserting and displaying data in a mysql table using ajax.

I have been experimenting with this code which inserts and displays records from a mysql database. I'm now trying to get it to display the success message in the div with the id "info" whilst also displaying all the records. I seem to only do one but never both. Many thanks.

form.php

     <script   src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
  </script>
  <script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

 <script type="text/javascript">
           $(document).ready(function(){

                function showComment(){
                  $.ajax({
                    type:"post",
                    url:"process_ajax.php",
                    data:"action=showcomment",
                    success:function(data){
                         $("#comment").html(data);

                    }
                  });
                }
                showComment();

                $("#button").click(function(){

                      var username=$("#username").val();
                      var review=$("#review").val();

                      $.ajax({
                          type:"post",
                 url:"process_ajax.php",
                                 data:"username="+username+"&review="+review+"&action=addcomment",
                   success:function(data){
                       $("#info").html(data);
                         }

                      });

                });
           });
   </script>
  </head>

   <body>
    <form>
     Username : <input type="text" name="username" id="username"/>
           </br>
           Review : <input type="text" name="review" id="review" />
           </br>
           <input type="button" value="Send Comment" id="button">
            </form>
         <div id="info" />
           <ul id="comment"></ul>

   </body>
   </html>

Process_ajax.php

  <?php
 include_once("db_conx.php");

 $action=$_POST["action"];
  if($action=="showcomment"){
  $show="Select * from user_reviews ORDER by date desc";
  $result = $db_conx->query($show);
 while($row=mysqli_fetch_array($result)){
    echo "<li><b>$row[username]</b> : $row[review]</li>";
    }
    }
   else if($action=="addcomment"){
 $username= ($_POST['username']);
 $review= ($_POST['review']);

  $stmt = $db_conx->prepare('INSERT user_reviews SET username = ?,   review=?');
$stmt->bind_param('ss', $username, $review);
$stmt->execute();
if ($stmt->errno) {
 echo "There was an error in saving your review. Please try again." .          $stmt->error;
   }else{
   echo "Your review has been saved";
 }
 }
 ?>

Answer 1

Save the record data as an array and the message as a normal var and create a json:

$list = '';
while($row=mysqli_fetch_array($result)){
    $list .= "\n<li><b>$row[username]</b> : $row[review]</li>";
} 

if ($stmt->errno) {
   $msg = "There was an error in saving your review. Please try again." .             $stmt->error;
}else{
   $msg = "Your review has been saved";
}

echo json_encode(["list"=>$list, "msg"=>$msg]);

Remember to put in the dataType into the Ajax:

type:"post",
dataType: "json"

Then in your success function, you can access the vars: data.list and data.msg

Displaying a success message after form submission

Question

1 answers

solution1
0 2015-12-13 20:51:34

Displaying a success message after form submission

Question

1 answers

solution1 0 2015-12-13 20:51:34

solution1
0 2015-12-13 20:51:34