Ndtyjky

Good day all.
I have this code that works pretty well, but the problem is, when I change the values of the input field, It does not submit the new data to the server, rather the old data re resubmitted to the server, which is echo out. Nww input is only submitted after the page is refreshed. Wihich defeat the initial purpose of using ajax.
Please somebody should point me in the right direction. Thanks in advance.
Here is my code.

<link rel="stylesheet" href="comment.css">

<div class="l-com" id="l-com">

    <a class="clickComment" href="#">Leave a comment</a>

</div>

<div class="comment-container">

    <p>

       <input type="text" placeholder="Enter your name" id="name">

    </p>

    <p>

        <input type="text" placeholder="Enter your email" id="email">

    </p>

    <p>

       <textarea id="comment" placeholder="Write your comment" rows="7"> 

       </textarea>

    </p>

    <p>

       <button type="submit" id="submitBtn" 

       onclick="showComment();">Post</button>           

    </p>



    </div>

  <div id="comment-result">  

  </div>

JavaScript

    var name = document.getElementById('name').value,

    email = document.getElementById('email').value,

    comment = document.getElementById('comment').value,

    pageUrl = window.location.href,

    lastFsl = pageUrl.lastIndexOf('/'),

    partUrl = pageUrl.substring(lastFsl + 1),

    addrDot = partUrl.indexOf('.'),

    pageLocation = partUrl.substring(0, addrDot),

    webpage = pageLocation.replace(/-/g, '_'),

    leaveAcomm = document.querySelector('.clickComment'),

    commentWrapper = document.querySelector('.comment-container'),

    submitBtn = document.getElementById('submitBtn'),

    request = new XMLHttpRequest(),



    parameters = 'name=' + encodeURIComponent(name) + 

          '&email=' + encodeURIComponent(email) +

          '&comment=' + encodeURIComponent(comment) + 

          '&webpage=' + encodeURIComponent(webpage);



          leaveAcomm.addEventListener('click', ChangeDisplay);

          function ChangeDisplay() {

              elDisplay = commentWrapper.style.display;

              if(elDisplay === 'block') {

                  commentWrapper.style.display = 'none';

              }else {

                  commentWrapper.style.display = 'block';

              }

          }





    function showComment() {

        request.open('POST','comment.handler.php', true);

        request.setRequestHeader('Content-Type', 'application/x-www-form- 

        urlencoded');



        request.onreadystatechange = function () {

        if(request.readyState == 4 && request.status == 200) {

            var commentResult = document.getElementById('comment-result');

            commentResult.innerHTML = request.responseText;

            console.log(request.responseText);

       }



    }



    request.send(parameters);   

}

//php code comment.handler.php



<?php

$name = $_POST['name'];

$email = $_POST['email'];

$comment = $_POST['comment'];

$table = $_POST['webpage'];

$date = time();





//connect to the database 



$servername = 'localhost';

$username = 'root';

$password = '';

$db = 'commdb';



    $conn = mysqli_connect($servername, $username,$password, $db);

   if(!$conn) {

       die('could not connect ' . mysqli_connect_error($conn));

   }

$checkTable = "SELECT 1 FROM $table";

$chkTblRun = mysqli_query($conn, $checkTable);

if($chkTblRun !== FALSE) {

    if(!empty($name) && !empty($comment) && !empty($email)){

        $insertComment = "INSERT INTO $table(posterName, email, comment, 

         commentDate) 

         VALUES ('$name', '$email', '$comment', '$date')";

         $insertComRun = mysqli_query($conn, $insertComment);

         $selAll = "SELECT * FROM $table ORDER BY ID DESC";

         $selAllRun = mysqli_query($conn, $selAll);

         while($rows = mysqli_fetch_assoc($selAllRun)) {

            $name_field = $rows['posterName'];

            $comment_field = $rows['comment'];

            $postDate = $rows['commentDate'];



            echo '<section id="commResults">' . '<div id="postName">' . 

            $name_field . 

            '</div>'. '<div id="commenter">' . $comment_field . '</div>' .

            '</section>';

         }

    }

  } else {

        $createTable = "CREATE TABLE $table (" .

        "ID INT NOT NULL AUTO_INCREMENT," .

        "posterName VARCHAR (50) NOT NULL," .

        "email VARCHAR (50) NOT NULL," .

        "comment TEXT NOT NULL," .

        "commentDate TEXT NOT NULL," .

        "PRIMARY KEY (ID)" . 



        ")";



      $crtTblRn = mysqli_query($conn, $createTable);

      if(!$createTable) {

      echo 'could not create table ' . mysqli_error($conn);

     } else {

            if(!empty($name) && !empty($comment) && !empty($email)) {

            $insertComm = "INSERT INTO $table (posterName, email, comment, 

            commentDate)

            VALUES('$name', '$email', '$comment', '$date')";

            $insertComRun = mysqli_query($conn, $insertComm);

            $selAll = "SELECT * FROM $table ORDER BY ID DESC";

            $selAllRun = mysqli_query($conn, $selAll);

            while ($rows = mysqli_fetch_assoc($selAllRun)) {

                  $name_field = $rows['posterName'];

                  $comment_field = $rows['comment'];

                  $postDate = $rows['commentDate'];



                  echo '<section id="commResults">' . '<div id="postName">' . 

                  $name_field . 

                  '</div>' . '<div id="commenter">' . $comment_field . 

                  '</div>' .

                  '</section>';

             }

        }

      }

    }

?>