Question

我创建了一个包含多个字段的表单，我希望在页面的单独区域中显示用户输入的信息的摘要（将隐藏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>

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

Answer 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方法。

显示表单输入的摘要

2 个答案: