How to populate a table with javascript and print it

Question

I have a form that the user can fill and print the table when they are done. I can not seem to validate if the user finished. Once the user finished populating the table, I would like the whole table to be printed. Right now it is only printing the last entry.

<!DOCTYPE html>

    <html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <script type="text/javascript">

            function validateForm() 
            {       
                var x = document.getElementById('fname').value;

                if(x === null || x === "")
                {
                    document.getElementById('error1').innerHTML = "Invalid Entry";            
                }
                else
                    //tableCreate();
                addMore();
            }

            function addMore()
            {

                if(confirm("Would you like to add more names?") === true)
                {
                    document.getElementById('theForm').reset();
                //tableCreate();
                //console.log("ADD MORE");
                }
                else
                    tableCreate();
            }

            function tableCreate()
            {
                var N = document.getElementById('fname').value;
                var L = document.getElementById('lname').value;
                var D = document.getElementById('dob').value;

                var ar = [N, L, D];
                console.log(ar);
                document.write('<table>');
                document.write('<tr>');
                document.write('<th>First Name</th>');
                document.write('<th>Last Name</th>');
                document.write('<th>Date of Birth</th>');
                document.write('</tr>');                

                document.write('<tr');
                for(var i = 0; i < ar.length; i++)
                {
                    document.write('<br><td>' + ar[i] + '</td>');
                }
                document.write('</tr>');

                document.write('</table>');
            }            
        </script>
    </head>
    <body>

        <form name="theForm" action="FormAndTable.html" method="post">
            First Name: <input type="text" id="fname">
            <span style="color:red" id="error1"></span><br>
            Last Name: <input type="text" id="lname"><br>
            Date of Birth: <input type="text" id="dob"><br>
            <input type="button" value="Save" onclick="validateForm()">
        </form>

    </body>
    </html>

You have else /*tableCreate();*/ addMore();. When you commented out tableCreate(), addMore() was moved into the else statement. Not sure if this was desired. — Oriol
– Oriol, Commented Mar 13, 2016 at 23:34
If my form is not empty and submitted I would like to ask the user if they would like to input another entry. That is why after else I am calling the function addMore() — Avi
– Avi, Commented Mar 13, 2016 at 23:53
Just an advice for the future: you should look at an UI framework (AngularJS 1.X , Ember.js etc...). They are made to simplify lot of things, populate form included. — anotherdev
– anotherdev, Commented Mar 13, 2016 at 23:54
Thank you for the advice, but I am only suppose to use html, javascript, and css in this case — Avi
– Avi, Commented Mar 13, 2016 at 23:56

Scott Marcus · Accepted Answer · 2016-03-14 00:21:04Z

There is quite a bit wrong with your code.

You are using document.write() to generate new content on the page. Not only does this cause the DOM to be modified each time you do it (performance), but you must include your document.write statements as the DOM is being built, which means the location of your code will determine if the results are what you expect. Instead, you should set up an "output area" that already exists in the DOM and when you have new data for the page, you just inject it into that output area. This is why you kept losing the earlier input, each time you added a new user, you were writing out an entirely new table, which was replacing the old content already written to the page.
You are retrieving the DOM elements you need more than once. Instead just wait until the page is ready and then set up variables to hold on to the DOM reference you'll need throughout the code.

Please look at the working code snippet below for a much more modern, standards compliant and leaner solution to your problem.

// Wait until the DOM is loaded...
window.addEventListener("DOMContentLoaded", function(){  

  // Set up references to the DOM elements you'll need acces to:
  var fName = document.getElementById('fname');
  var lName = document.getElementById('lname');
  var dob = document.getElementById('dob');
  var oa = document.getElementById("outputArea");
  var btn = document.getElementById("btnSave");
  var frm = document.getElementById("theForm");
  var err = document.getElementById("error1");
  
  // Set up string variables for the beginning and end of the table
  var beginTable = '<table><tr><th>First Name</th><th>Last Name</th><th>Date of Birth</th></tr>';
  var endTable =   '</table>';
  
  // Variable to store the entire table as it grows
  var output = beginTable;

  
  // When the button is clicked, run the suppied function
  btn.addEventListener("click", function() {  
    
     // Gather up the input into an array
     var ar = [fName.value, lName.value , dob.value];
    
     // If there is no first name
     if(!fName.value) {
       // Display an error
       err.innerHTML = "Invalid Entry";            
     } else {
       // There is data, begin a new row
       output +="<tr>";
       
       // Loop over the array and inject the input element's values into new table cells
       for(var i = 0; i < ar.length; ++i) {
           output += '<td>' + ar[i] + '</td>';
       }
       // End the row
       output +="</tr>";
       
       // Ask if user is done
       addMore();
     }
  });
  
                          
  function addMore() {

    if(confirm("Would you like to add more names?")) {
      // Not done yet, clear form out
      theForm.reset();
    } else {
      // Done. close up the table
       output += endTable;
      // Write the string to the waiting output area
       oa.innerHTML = output;
    }
   
  }

    
});

<form name="theForm" id="theForm" action="FormAndTable.html" method="post">
            First Name: <input type="text" id="fname"><span style="color:red" id="error1"></span><br>
            Last Name: <input type="text" id="lname"><br>
            Date of Birth: <input type="text" id="dob"><br>
            <input type="button" value="Save" id="btnSave">
        </form>


        <!-- Instead of document.write, which writes over the document, set up a placeholder
             for output that starts off empty, but at least is positioned in the DOM ahead of time. -->
        <div id="outputArea"></div>

Collectives™ on Stack Overflow

How to populate a table with javascript and print it

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related