显示表单输入摘要 [英] display summary of form inputs
问题描述
我创建了一个包含多个字段的表单，我希望用户输入的信息摘要显示在页面的单独区域中，（将被隐藏div直到按下提交按钮。一旦按下div将显示并希望那里有来自用户的输入详细信息。）
I've created a form with multiple fields and I would like to have a summary of the user entered information show up in a separate area on the page, ( will be hidden div until the submit button is pressed. Once pressed the div will show and hopefully have the input details from the user there)
我粘贴了代码的简化版本（只有两个输入字段）。
我试图遍历表单字段然后显示。
这里我有document.write，但将使用innerHTML写入div。
I have pasted a simplified version of my code (only two input fields). I am trying to loop through the form fields and then display. here I have document.write but will be using innerHTML to write to the div.
<!DOCTYPE html>
<html>
<body>
<form id="frm1">
First name: <input type="text" name="fname" value="" ><br>
Last name: <input type="text" name="lname" value="" ><br>
<input type="button" id="btn" onClick="myfun();" value="Submit">
</form>
<p>Return the user input of each element in the form:</p>
<script>
var x = document.getElementById("frm1");
function myfun() {
for ( var i = 0; i < x.length; i++ ) {
document.write(x.elements[i].value);
}
</script>
</body>
</html>
推荐答案
尝试：
<script>
var x = document.getElementsByTagName("input");
for(var i = 0; i < x.length; i++)
{
if(x[i].parentNode != document.getElementById("frm1"))
{
x.splice(i, 1);
}
}
for(i = 0; i < x.length; i++)
{
document.getElementById("summarydiv").innerHTML += x[i].value;
}
</script>
我认为应该可以。您需要引用输入标签的所有值属性，而不是元素本身。
通常，innerHTML是不好的做法，但是它是在HTML5中标准化的！
That should work, I think. You need to reference all the value properties of the input tags instead of the element itself.
Normally, innerHTML would be bad practice, but it was standardized in HTML5!
这篇关于显示表单输入摘要的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
