form submit without page refresh using ajax

[UK-1991]

Hello,

I have just created a form and the form data is submitting using Ajax as I wanted the user to be on the same page after he submits the form as there are bootstrap accordian tabs data is submitting properly and retriving as well no problem but when the users click on submit data sends and save in the database where as sent data remains in the form like calues remain in the form when I refresh using F5 then values removes from the form and retrieved data update at that time. I want like on live chat we click on send on the same time the message posted on the message box

Get_data.php

<?php
    session_start();
    include("connection.php");
    $receipt   = $_POST["pid"];
?> <div class="tab-pane active" id="#<?php echo $receipt; ?>" style="height: 246px;"> <div class="demo"> <div class="messagebox"> <?php
            $get_msgs = mysqli_query($connection, "SELECT users.fullname, messages.message, messages.time FROM messages, users WHERE (sender_id='$receipt' OR receipt_id='$receipt') and (sender_id={$_SESSION["uid"]} OR receipt_id={$_SESSION["uid"]}) AND (users.uid = messages.sender_id) ORDER BY msg_id ASC");
            while($messages = mysqli_fetch_array($get_msgs)) {

                ?> <div class="message1"> <p class="username"><?php echo $messages["fullname"]; ?></p> <p class="time"><?php echo $messages["time"]; ?></p> <div class="clearfix"></div> <p class="messagebar"><?php echo $messages["message"]; ?></p> </div> <?php } ?> </div> <div class="reply"> <textarea class="messages" id="message" name="message">

[UK-1991]

Ajax Call

            <script>

            function reply() {
                var hr = new XMLHttpRequest();

                var url  = "includes/conversation.php";
                var sender_id = document.getElementById("sender_id").value;
                var receipt_id = document.getElementById("receipt_id").value;
                var msg  = document.getElementById("message").value;
                var vars = "sender_id="+sender_id+"&receipt_id="+receipt_id+"&message="+msg;

                hr.open("POST", url, true);
                hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
                hr.send(vars);
            }

              function ajax_post(pid) {
                  var hr = new XMLHttpRequest();

                  var url = "includes/get_data.php";
                  var vars= "pid="+pid;

                  hr.open("POST", url, true);

                  hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

                  hr.onreadystatechange = function () {
                      if (hr.readyState == 4 & hr.status == 200) {
                          var return_data = hr.responseText;
                          document.getElementById("status").innerHTML = return_data;
                      }
                  }

                  hr.send(vars);
                  document.getElementById("status").innerHTML = "Processing...";
              }

            </script>

get_data.php

<?php
    session_start();
    include("connection.php");
    $receipt   = $_POST["pid"];
?>
<div class="tab-pane active" id="#<?php echo $receipt; ?>" style="height: 246px;">

    <div class="demo">
        <div class="messagebox">
            <?php
            $get_msgs = mysqli_query($connection, "SELECT users.fullname, messages.message, messages.time FROM messages, users WHERE (sender_id='$receipt' OR receipt_id='$receipt') and (sender_id={$_SESSION["uid"]} OR receipt_id={$_SESSION["uid"]}) AND (users.uid = messages.sender_id) ORDER BY msg_id ASC");
            while($messages = mysqli_fetch_array($get_msgs)) {

                ?>
                <div class="message1">
                    <p class="username"><?php echo $messages["fullname"]; ?></p>
                    <p class="time"><?php echo $messages["time"]; ?></p>
                    <div class="clearfix"></div>
                    <p class="messagebar"><?php echo $messages["message"]; ?></p>
                </div>
            <?php } ?>
        </div>

        <div class="reply">
            <textarea class="messages" id="message" name="message"></textarea>
            <input type="hidden" id="sender_id" name="sender_id" value="<?php echo $_SESSION["uid"]; ?>" />
            <input type="hidden" id="receipt_id" name="receipt_id" value="<?php echo $receipt; ?>" />
            <input type="button" name="reply" value="Reply" onclick="reply();" />
            <div class="clearfix"></div>
        </div>
    </div>
</div>

Please, pretty please, punctuate your question. It's almost impossible to read. It's like reading that Ned Kelly book.

[UK-1991]

Like I just said I want a message box tio work as same as facebook chat or orcut chat you click on send button message sends to the user and posted on the message box at the same time. And I am not good in english but I am trying to improve