How to keep Previous inputted content when a new Fieldset is added

Question

Please I am having an issue which i have no idea on how to solve as I am not good with JavaScript.

I am trying to make sure that when an Activity log has been filled and the user choose to add a new Activity. The previous entered content should not be cleared but should remain.

Right about now the contents inputted clears off which is what I don't want. I want the content to remain when a new activity has been added. Thanks.

 <!DOCTYPE html> <html> <head lang="en"> <meta charset="utf-8"> <title>Activity Log</title> <script> // Wait until the window finishes loaded before executing any script window.onload = function() { // Initialize the activityNumber var activityNumber = 6; // Select the add_activity button var addButton = document.getElementById("add_activity"); // Select the table element var tracklistTable = document.getElementById("tracklist"); // Attach handler to the button click event addButton.onclick = function() { // Add a new row to the table using the correct activityNumber tracklistTable.innerHTML += '<tr><td>' + activityNumber + '</td><td><label>Activity Log: </label><br/><input type="text" name="actlog' + activityNumber + '" class="required"></td><td><label>Time: </label><br/><input type="time" name="time' + activityNumber + '" class="required"></td></tr>'; // Increment the activityNumber activityNumber += 1; } } </script> </head> <body> <div class="container"> <div class="row"> <div class="leftcol"> <form name='mainForm' id='mainForm' method="get" action="#"> <fieldset> <legend>Input Activity Logs</legend> <table id="tracklist"> <tr> <th colspan="3">Track List: </th> </tr> <tr> <td>1</td> <td><label>Activity Log: </label><br/><input type="text" name="actlog1" class="required"></td> <td><label>Time: </label><br/><input type="time" name="time1" class="required"></td> </tr> <tr> <td>2</td> <td><label>Activity Log: </label><br/><input type="text" name="actlog2" class="required"></td> <td><label>Time: </label><br/><input type="time" name="time2" class="required"></td> </tr> <tr> <td>3</td> <td><label>Activity Log: </label><br/><input type="text" name="actlog3" class="required"></td> <td><label>Time: </label><br/><input type="time" name="time3" class="required"></td> </tr> <tr> <td>4</td> <td><label>Activity Log: </label><br/><input type="text" name="actlog4" class="required"></td> <td><label>Time: </label><br/><input type="time" name="time4" class="required"></td> </tr> <tr> <td>5</td> <td><label>Activity Log: </label><br/><input type="text" name="actlog5" class="required"></td> <td><label>Time: </label><br/><input type="time" name="time5" class="required"></td> </tr> </table> <input type="submit" /> </fieldset> </form> <button id="add_activity">Add Activity</button> </div> </div> </div> </body> </html>

Answer 1

Instead of directly editing the inner html, which is going to reset your fields, create a new element (a new table row) and append it to your table with .appendChild. See below. Let me know if you have any questions.

 <!DOCTYPE html> <html> <head lang="en"> <meta charset="utf-8"> <title>Activity Log</title> <script> // Wait until the window finishes loaded before executing any script window.onload = function() { // Initialize the activityNumber var activityNumber = 6; // Select the add_activity button var addButton = document.getElementById("add_activity"); // Select the table element var tracklistTable = document.getElementById("tracklist"); // Attach handler to the button click event addButton.onclick = function() { // Create New Table Row Element var newNode = document.createElement('tr'); // Set the Inner HTML of that element newNode.innerHTML = '<td>' + activityNumber + '</td><td><label>Activity Log: </label><br/><input type="text" name="actlog' + activityNumber + '" class="required"></td><td><label>Time: </label><br/><input type="time" name="time' + activityNumber + '" class="required"></td>'; // Append the element to the tracklistTable tracklistTable.appendChild(newNode); // Increment the activityNumber activityNumber += 1; } } </script> </head> <body> <div class="container"> <div class="row"> <div class="leftcol"> <form name='mainForm' id='mainForm' method="get" action="#"> <fieldset> <legend>Input Activity Logs</legend> <table id="tracklist"> <tr> <th colspan="3">Track List: </th> </tr> <tr> <td>1</td> <td><label>Activity Log: </label><br/><input type="text" name="actlog1" class="required"></td> <td><label>Time: </label><br/><input type="time" name="time1" class="required"></td> </tr> <tr> <td>2</td> <td><label>Activity Log: </label><br/><input type="text" name="actlog2" class="required"></td> <td><label>Time: </label><br/><input type="time" name="time2" class="required"></td> </tr> <tr> <td>3</td> <td><label>Activity Log: </label><br/><input type="text" name="actlog3" class="required"></td> <td><label>Time: </label><br/><input type="time" name="time3" class="required"></td> </tr> <tr> <td>4</td> <td><label>Activity Log: </label><br/><input type="text" name="actlog4" class="required"></td> <td><label>Time: </label><br/><input type="time" name="time4" class="required"></td> </tr> <tr> <td>5</td> <td><label>Activity Log: </label><br/><input type="text" name="actlog5" class="required"></td> <td><label>Time: </label><br/><input type="time" name="time5" class="required"></td> </tr> </table> <input type="submit" /> </fieldset> </form> <button id="add_activity">Add Activity</button> </div> </div> </div> </body> </html>

How to keep Previous inputted content when a new Fieldset is added

Question

1 answers

solution1
3 ACCPTED 2019-02-27 11:43:31

How to keep Previous inputted content when a new Fieldset is added

Question

1 answers

solution1 3 ACCPTED 2019-02-27 11:43:31

solution1
3 ACCPTED 2019-02-27 11:43:31