显示表单输入的摘要答案

【问题标题】：display summary of form inputs显示表单输入的摘要
【发布时间】：2013-12-03 19:04:34
【问题描述】：

我创建了一个包含多个字段的表单，我希望用户输入信息的摘要显示在页面上的单独区域中，（将隐藏 div 直到按下提交按钮。一旦按下div 将显示并希望有用户的输入详细信息）

我已经粘贴了我的代码的简化版本（只有两个输入字段）。我正在尝试遍历表单字段然后显示。这里我有 document.write 但将使用 innerHTML 写入 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>

【问题讨论】：

标签： javascript arrays forms loops

【解决方案1】：

试试：

<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 中标准化！

【讨论】：

对不起，如果我听起来像个菜鸟，有点新手。
但是那里的父节点是否可以引用表单，那么 x 是输入变量。
拼接有什么作用？（对不起，每次我点击进入它在完成之前发表评论，我在我的手机上）
有没有办法在打印到内部 html 时为每个值添加标签或添加一些空格和格式
一切都好，也排序了。在发布 q 之前会先检查一下。感谢您的原始答案，很有效。 :)

【解决方案2】：

我可以建议使用 jQuery 之类的库吗？当你只需要在 JavaScript 中完成这一项任务时，它可能不是最佳解决方案，但通常它可以让你编写代码更快、更具可读性（因此更好地重构、重用等）并且可以跨浏览器兼容。

$('input#btn').click(function(){
        // get all input fields from form with id "frm1" that are of type="text"
        // into array $inputs
    var $inputs = $('form#frm1 :input[type="text"]'),
        result = "";

    $inputs.each(function(){
        // access the individual input as jQuery object via $(this)
        result += $(this).val()+"<br>";
    });

    // store result in some div
    $('div#result').html(result);
});

live demo

这可以满足您的需求，而且好处是：您无需在 HTML 中指定 onclick=".."。因此，当您将来想要编辑代码时，您只有一个地方可以查看：JavaScript 代码（而不是遍布 HTML 的 JS 部分）。

您可以在 jqapi.com 或 official API documentation 中查找 jQuery 方法。

【讨论】：

那会更好，但这是学校作业，所以我们不能使用 jQuery。