Skip to content

I want to print the data the user has submitted in html form

I want to print the user’s submitted data after he click on the “Submit Your Entries” button

and display a massage for him says: Thanks ” Name” for your comments.. Your e-mail: Things you liked on my site: site design and Contents. for example

here’s my code:

    <title>Feedback form</title>
<form method = "post" action = "">
    <title>Feedback form </title>


  <h1>Feedack Form</h1>
<p>Please fill out this form to help me improve My site.</p>

  <input name="name" type="text" size="20"/> <br>

  E-mail Addres:
    <input name="email" type="email" size="20"/>

    <strong>Things you like on my site:</strong> <br>

    <label>Site design
<input name = "thingsliked" type = "checkbox" value = "Design" /></label>
<input name = "thingsliked" type = "checkbox" value = "Contents" /></label>
 <label>Ease of use
<input name = "thingsliked" type = "checkbox" value = "Ease" /></label>

<input type = "submit"  value = "Submit Your Entries"/>
 <input type = "reset" value = "Clear Your Entries" />


Have a look at this

  1. You need to wrap in a form before you can do submit and/or reset – your form tag cannot be in the head of the page
  2. I preventDefault here to not submit you will have to think of a way to do submit or the user cannot see the result – for examplel another submit button or using AJAX

document.getElementById("feedback").addEventListener("submit", function(e) {
  e.preventDefault(); // stop submission
  const html = [...this.elements]
    .filter(ele => {
      if (ele.type === "text" || ele.type==="email") return true;
      if (ele.type === "checkbox" && ele.checked) return true;
      if (ele.type === "submit" || ele.type === "reset") return false;
    .map(ele => {
      const name =
      const value = ele.value;
      if (ele.classList.contains("thingslike")) return `<tr class="thingslike"><td>${}</td><td>&nbsp;</td></tr>`
      else return `<tr><td>${}</td><td>${ele.value}</td></tr>`
  document.getElementById("res").innerHTML = `You answered: <br/><table id="answer">
   const like = document.querySelector("#answer .thingslike");
   if (like) like.insertAdjacentHTML("beforebegin",`<tr><td colspan="2">Things you like:</td></tr>`)
<h1>Feedback Form</h1>
<p>Please fill out this form to help me improve My site.</p>
<form id="feedback">
    <input name="name" type="text" size="20" /> <br> E-mail Addres:
    <input name="email" type="email" size="20" />

      <strong>Things you like on my site:</strong> <br>

      <label>Site design
<input name="Design" class="thingslike" type="checkbox" /></label>
<input name="Contents" class="thingslike" type="checkbox" /></label>
      <label>Ease of use
<input name="Ease of use" class="thingslike" type="checkbox" /></label>
      <input type="submit" value="Submit Your Entries" />
      <input type="reset" value="Clear Your Entries" />

<div id="res"></div>