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 submit button is pressed. Once pressed the div will show and hopefully have the input details from the user there)

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>

Answer

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!

Leave a Reply

Your email address will not be published. Required fields are marked *