This might be a broad answer to give but i'l try to shorten it up. What i am trying to do is use a form to get some information from the user and "validate the form" using JavaScript. If the validation is a success the form gets submitted. Once this has happened , i am trying to retrieve the data that was entered to the form using java script and display on the same page.(using a modal)

Although i think my logic behind this is wrong. Once the form validates it gets submitted ? once it is submitted the page refreshes ? thus the input data is lost? could this be the reason why i keep on getting empty empty values in the modal ? 

Heres the html for the form

```
<div class="feedback-background">
<div class="feedback-content">
    <div class="close">+</div>
    <img src="../Images/Images2/feedbackimg1.jpg" alt="Givefeedback" style="width:100px;height:100px;">

    <form name="FeedbackForm" action="/action_page.php" onsubmit="return validateForm();displayContent();"
          method="get">
        Name:
        <input id="Name" name="Name" type="text" placeholder="Name">
        E-Mail:
        <input id="E-mail" name="E-mail" type="email" placeholder="E-mail">
        What do you think about us?<br>
        <textarea id="comment" rows="6" cols="33" name="comment"></textarea>
        <br>
        How would you rate us ?
        <br>

        <label><input type="radio" name="rating" id="rating1" value="Excellent" checked>Excellent</label>
        <label><input type="radio" name="rating" id="rating2" value="Very Good">Very Good</label>
        <label><input type="radio" name="rating" id="rating3" value="Average">Average</label>
        <label><input type="radio" name="rating" id="rating4" value="Poor">Poor</label>
        <label><input type="radio" name="rating" id="rating5" value="Extreamly Poor">Extremely Poor</label>
        <input type="submit" id="submit" value="Submit">
    </form>
</div>

```

Here is the HTML for the modal where the input data will be shown again to the customer

```
<div class="popup">
    <div class="popuptext" id="myPopup"><p>Thank you <span id="username"></span> ,<br>Your feedback has been
        recorded.<br>
        <br>You commented that"<span id="usercomment"></span>" <br><br>and rated our website "<span
                id="userrating"></span>".
        <br><br>Thank you
        for taking your time to do so.<br><br>You will now be re-directed automatically</p>
    </div>
</div>

```

Here is the css i used for the form

```
/*----------comment form----------*/

.feedback-background{
 width: 100%;
 height: 100%;
 background-color: rgba(0,0,0,0.7);
 position: absolute;
 top: 0px;
 display: flex;
 align-items: center;
 justify-content: center;
 display:none;
 }
 .feedback-content{
  width: 500px;
  height: 550px;
  background-color: white;
  border-radius: 4px;
  padding: 20px;
  position:relative;

  }
 #submit{text-transform:uppercase;
 padding:6px 2px;
 margin-right: 40px;
 margin-top: 20px;

 background: #ee0c6e;
 font-weight:600;
 color:white;
 border-radius: 3px; 
 font-size: 10px;
 min-width: 100px;
 text-decoration:none
 }

 input {
 width: 50%;
 display: block;
 margin: 10px 0px;

   }

   label {
   display: block;
  }

 input[type="radio"]{
 width: auto;
 display: inline;
  }
 input[type="submit"]{
 width:10em;height: 2em;
 cursor:pointer;

 }
.close{
position:absolute;
top:0px;
right:14px;
transform:rotate(45deg);
font-size:42px;
cursor:pointer;
 }
#feedbacksubmit{
margin-left:600px;
margin-bottom:50px;
background-color:#484848;
border-radius:14px;
padding:10px;
cursor:pointer;
color:white;
outline:none;
}

```

This is the CSS i used for the pop up modal

```
/*-----popup----*/
.popup{
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.7);
position: absolute;
top: 0px;
display: flex;
align-items: center;
justify-content: center;
display:none;

 }
.popuptext{
  width: 100px;
 height: 350px;
 background-color: #000025;
 border-radius: 4px;
 padding: 20px;
 position:relative;
 color:#fff;
 width: 20%;
 height:30%;
 display: block;
 margin: 10px 0px;
 text-align:center;
 margin-left:0px;
 margin-bottom:80px;
 }

 #logo{

margin-right:100px;
float:left;
}

```

Here are the javascripts i have used.

```
/*------comments form-----*/

document.getElementById('feedbacksubmit').addEventListener('click',
    function () {
        document.querySelector('.feedback-background').style.display = 'flex';
    }
)

document.querySelector('.close').addEventListener('click',
    function () {
        document.querySelector('.feedback-background').style.display = 'none';
    }
)

function displayContent() {
    var name = document.getElementById("Name").value;
    var comment = document.getElementById("comment").value;

    var ratings = document.getElementById('rating');
    var rate_value;
    for (var i = 0; i < rating.length; i++) {
        if (rating[i].checked) {
            rate_value = rating[i].value;
        }
    }

    /*these lines are used to write the details into the new modal*/
    document.getElementById("username").textContent = name;
    document.getElementById("usercomment").textContent = comment;
    document.getElementById("userrating").innerHTML = rate_value;

    return "";
}

function closePopup() {

    document.querySelector('.popup').style.display = 'none';
}

/*-------validation-----*/
function validateForm() {
    var x = document.forms["FeedbackForm"]["Name"].value;
    if (x == "") {
        alert("Name must be filled out");
        return false;
    }
    var z = document.forms["FeedbackForm"]["E-mail"].value;
    if (z == "") {
        alert("Please enter your E-mail address to proceed");
        return false;
    }
    var y = document.forms["FeedbackForm"]["comment"].value;
    if (y == "") {
        alert("Comment section can not be empty");
        return false;
    }

    var a = 0, rdbtn = document.getElementsByName("rating")
    for (i = 0; i < rdbtn.length; i++) {
        if (rdbtn.item(i).checked == false) {
            a++;
        }
    }
    if (a == rdbtn.length) {
        alert("Please select a rating according to you");
        return false;
    }

    document.getElementById('submit').addEventListener('click',
        function () {
            document.querySelector('.feedback-background').style.display = 'none';
            document.querySelector('.popup').style.display = 'flex';
        }
    )
}

```

Is there a better way ? how can i go about doing this? what have i done wrong