Myujth

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>';
 
 
 
 

?>