Display Summary Of Form Inputs

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 s

Solution 1:

Try:

<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>

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!

Solution 2:

Might I suggest working with a library such as jQuery? When you only have this one task to be done in JavaScript, it might not be the optimal solution, but generally it lets you write code much faster, much more readable (and so better to refactor, reuse, etc.) and be cross browser compatible.

$('input#btn').click(function(){
        // get all input fields from form with id "frm1" that are of type="text"// into array $inputsvar $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

This would do what you want and the good part is: You don't need to specify the onclick=".." in your HTML. So when you want to edit your code in the future, you have only one place to look: the JavaScript code (and not JS parts spread all over the HTML).

You can look up the jQuery methods either on jqapi.com or in the official API documentation.