我想以html格式打印用户提交的数据

我想在用户点击"提交您的参赛作品"按钮

并为他展示按摩说：谢谢"；名称"；请发表意见。。您的电子邮件：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>

看看这个

在提交和/或重置之前，您需要包装在表单中-您的表单标记不能位于页面的头部
I preventDefault在这里不提交您必须想一种方法来进行提交，否则用户无法看到结果-例如，使用另一个提交按钮或使用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>

相关内容

最新更新

热门标签：