title: How to instantly display data after form submission using jQuery and AJAX?
body: <p>I have a PHP form that uses jQuery/AJAX to submit data into a MySQL database table.  Currently, I have a message display saying " Done!" once the form is submitted, but would like the actual data to instantly display after it has been submitted.  I have a loop setup to display previously added messages in divs with the class name 'msg_container', and would like the new data to display in one of these divs after form submission.</p>
  
  <p>What is the best way to do this?  Any help would be greatly appreciated!</p>
  
  <p>index.php javascript</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      $(document).ready(function () {
  
          $(".button").click(function () {
  
              var user_id = $("textarea#uer_id").val();
              var msg = $("textarea#msg ").val();
              var dataString = 'user_id=' + user_id + '&amp;msg=' + msg;
  
              $.ajax({
                  type: "POST",
                  url: "add.php",
                  data: dataString,
                  success: function () {
                      alert("Done!")
                  }
              });
              return false
          });
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>index.php query</p>
  
  <pre><code>$user_id = $_GET['user_id'];
  
  require_once('../../includes/connect.php');
  
  $dbh = get_dbh($_SESSION['ORG_ID']);
  
  $sth = $dbh-&gt;query ("SELECT *, user.last_name, user.first_name FROM msgs
                       INNER JOIN users
                       ON msgs.user_id = users.id
                       WHERE user_id = '$user_id'
                       ORDER BY timestamp");               
  
  $row = $sth-&gt;fetch ();
  </code></pre>
  
  <p>index.php HTML</p>
  
  <pre><code>&lt;div id="msgs"&gt;
      &lt;?php while ($row = $sth-&gt;fetch ()) { ?&gt;
      &lt;div class="msg_container"&gt;
          &lt;div class="left"&gt;&lt;? echo $row['last_name'].', '.$row['first_name']; ?&gt;&lt;br /&gt;
              &lt;? $timestamp = date('m/d/Y g:i a', strtotime($row['timestamp'])); echo $timestamp; ?&gt;
          &lt;/div&gt;
          &lt;div class="right"&gt;&lt;? echo $row['msg']; ?&gt;&lt;/div&gt;
          &lt;div class="clear"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;? } ?&gt;
      &lt;div class="add_note"&gt;
          &lt;div class="left"&gt;Add Message&lt;/div&gt;
          &lt;div class="right"&gt;
              &lt;form id="add_msg"&gt;
                  &lt;textarea id="msg" name="msg"&gt;&lt;/textarea&gt;
                  &lt;input type='submit' class="button right-aligned" value='Submit' /&gt;
              &lt;/form&gt;
              &lt;div class="clear"&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="clear"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>add.php</p>
  
  <pre><code>&lt;?php
  
  require_once('../../includes/connect.php');
  
  $dbh = get_dbh($_SESSION['ORG_ID']);
  
  $user_id = $_POST['user_id'];
  $msg= $_POST['msg'];
  
  date_default_timezone_set("UTC");
  $timestamp = date('Y-m-d H:i:s', strftime(gmmktime())); 
  date_default_timezone_set($_SESSION['TIME_ZONE']);
  
  $sth = $dbh-&gt;prepare ("INSERT INTO msgs (id, user_id, msg, timestamp) VALUES (?, ?, ?, ?)");
  $data = array (NULL, $user_id, $msg, $timestamp);
  
  $sth-&gt;execute ($data);
  
  session_write_close();
  
  ?&gt;
  </code></pre>