显示表单输入的摘要

时间:2013-11-20 00:11:45

标签: javascript arrays forms loops

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

2 个答案:

答案 0 :(得分:0)

尝试:

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

答案 1 :(得分:0)

我可以建议使用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.comofficial API documentation上查找jQuery方法。