我想打印用户以 html 形式提交的数据答案

【问题标题】：I want to print the data the user has submitted in html form我想打印用户以 html 形式提交的数据
【发布时间】：2021-03-06 01:32:13
【问题描述】：

我想在用户点击“提交您的条目”按钮后打印用户提交的数据

并为他展示按摩说：感谢您的 cmets 的“名称”.. 您的电子邮件：example@yahoo.com 你在我的网站上喜欢的东西：网站设计和内容。例如

这是我的代码：

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

  </head>
  <body>

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

<p><lable>Name:
  <input name="name" type="text" size="20"/> <br>

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

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

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


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

【问题讨论】：

欢迎来到 Stack Overflow！请访问help center，使用tour 了解内容和How to Ask。做一些研究，搜索关于SO的相关主题；如果您遇到困难，请发布您的尝试minimal reproducible example，并使用[<>] sn-p 编辑器记录输入和预期输出。
为什么不用FormData？见这里：thoughtbot.com/blog/…

标签： javascript html forms checkbox onsubmit

【解决方案1】：

看看这个

在提交和/或重置之前，您需要先包装一个表单 - 您的表单标签不能位于页面顶部
我在这里防止默认不提交，您必须想办法提交，否则用户无法看到结果 - 例如另一个提交按钮或使用 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 = ele.name
      const value = ele.value;
      if (ele.classList.contains("thingslike")) return `<tr class="thingslike"><td>${ele.name}</td><td>&nbsp;</td></tr>`
      else return `<tr><td>${ele.name}</td><td>${ele.value}</td></tr>`
    }).join("");
  document.getElementById("res").innerHTML = `You answered: <br/><table id="answer">
   <tbody>${html}</tbody>
   </table>`;
   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">
  <p>
    <label>Name:
    <input name="name" type="text" size="20" /> <br> E-mail Addres:
    <input name="email" type="email" size="20" />
  </label>

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

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

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

【讨论】：

谢谢，这很有帮助，但输出是这样的：感谢您的 cmets：name anyname email anyemail@hotmail.com 设计易用性…………。有没有办法在设计和易用性之前显示“您在我的网站中喜欢的东西”？