title: AJAX View Table Data Button Click
body: <p>I would like to display the contents of my query on the same page as the button that initiates the query  . </p>
  
  <pre><code> &lt;form action="action.php" method="post"&gt;
  
  &lt;input type="submit" class="button" id="mail-button" name='msubmit'      value="View Mail" /&gt;
  </code></pre>
  
  <p>At the moment the button sends me to action.php that contains the below code</p>
  
  <p>// this is my action.php</p>
  
  <pre><code>if (isset($_POST['mail-button'])) {  // if the view message button is click
  
  include('..\time.php');
  include('..\db.php');
  $con = mysqli_connect($dbsrvname, $dbusername, $dbpassword, $dbname);
  
  
  $delete = mysqli_query($con,"DELETE FROM notopen WHERE username= '".$_COOKIE[$cookie_name]."' AND value='1'");
  
  $q = mysqli_query($con,"SELECT * FROM tbl1 WHERE username = '".$_COOKIE[$cookie_name]."'");
     while($row = mysqli_fetch_assoc($q)){
         //echo $row['id'];
         $id = $row['id'];
         $username = $row['username'];
  
  
  $q = mysqli_query($con,"SELECT * FROM inbox WHERE rcpuser= '".$_COOKIE[$cookie_name]."' AND senderid ORDER BY time DESC
    LIMIT 20");
  // I WOULD LIKE TO DISPLAY THESE RESULTS BACK ON THE SAME PAGE AS THE BUTTON WHILE USING AJAX TO AVOID PAGE REFRESHING
  echo  '&lt;table border="1" width="500px"&gt;';
  echo'&lt;tr&gt;';
  
  echo '&lt;table class="table table-fixed  table-bordered table-hover"&gt;'; 
  
  echo "&lt;tr&gt;&lt;th&gt;From&lt;/th&gt;&lt;th&gt;Message&lt;/th&gt;&lt;th&gt;Time-Date&lt;/th&gt;&lt;/tr&gt;&lt;tr&gt;"; 
  
  while($row = mysqli_fetch_assoc($q))
  {
  
  
  
  //echo $row['senderid']; // to reply back to sender
  $senerid = $row['senderid'];
  echo "&lt;tr&gt;&lt;td&gt;"; 
  
  echo "&lt;a href=message.php?id=".$senerid."&gt;Reply to : &lt;/a&gt;";
  echo $row['username']; // username of sender
  echo "&lt;/td&gt;&lt;td&gt;";   
  echo $row['message'];
  echo "&lt;/td&gt;&lt;td&gt;";    
  echo "time_passed"($row['time']);  //time_passed calling funtion
  
  echo "&lt;/td&gt;&lt;/tr&gt;"; 
  
  
  
  }
  echo "&lt;/table&gt;"; 
  </code></pre>
  
  <p>The above displays the results in a table for viewing , Now I want to use AJAX so the result are displayed on the same page without reloading instead of the action for the button redirecting to the above code . I need help understanding how I can get my table to show back in the success on my script and how to correctly format . Here is my script below </p>
  
  <pre><code> // I dont want to redirect  here, I want my script to execute and have  the results displayed back on this page
  &lt;form action="action.php" method="post"&gt;
  
  
  
    &lt;script src="/js/jquery.js"&gt;&lt;/script&gt;
  
  &lt;script&gt;
  $('#mail-button').on('click', function() {
  var info = $('#name').val();
  $.ajax({
  method: "POST",
  url: "action_mail_view.php",
  data: {
    name: info
  },
   success: function(response){                    
   $("#table_wrapper").html(response); 
   //alert(response);
    }
  
    });
  
   });
  
  &lt;/script&gt;
  
  
  &lt;table border="1" align="center"&gt;
  &lt;tr&gt;
  &lt;td&gt;  &lt;input type="button" class="button" id="mail-button"   name='name'     value="View Mail" /&gt; &lt;/td&gt;
  &lt;/tr&gt;
  &lt;/table&gt;
   &lt;div id="table_wrapper"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>How can I achieve this please? By just clicking the button the query (action.php)is executed and no refresh (AJAX) and results from table displayed on same page as button . Thanks in advance.</p>