How can I display form data in a table on the same page

Question

I'm a beginner to Javascript and CSS.

I'm creating a web app that gets the user data, for example, the name of the person, etc. So, I want the form to close when its submit button is pressed and then I want it to create a table of the submitter's info.

submitter's info never ends, so it should have the capability to store many data.

I used this login form to get an idea;

https://www.w3schools.com/howto/howto_css_login_form.asp

The code is below;

 // Get the modal var modal = document.getElementById('id01'); // When the user clicks anywhere outside of the modal, close it window.onclick = function(event) { if (event.target == modal) { modal.style.display = "none"; } } function all() { let name = document.getElementById("output").value; var finalName = document.createElement("PARAGRAPH") name.innerHTML(name) }

 body { font-family: Arial, Helvetica, sans-serif; } /* Full-width input fields */ input[type=text], input[type=password] { width: 100%; padding: 12px 20px; margin: 8px 0; display: inline-block; border: 1px solid #ccc; box-sizing: border-box; } /* Set a style for all buttons */ button { background-color: #4CAF50; color: white; padding: 14px 20px; margin: 8px 0; border: none; cursor: pointer; width: 100%; } button:hover { opacity: 0.8; } /* Extra styles for the cancel button */.cancelbtn { width: auto; padding: 10px 18px; background-color: #f44336; } /* Center the image and position the close button */.imgcontainer { text-align: center; margin: 24px 0 12px 0; position: relative; } img.avatar { width: 40%; border-radius: 50%; }.container { padding: 16px; } span.psw { float: right; padding-top: 16px; } /* The Modal (background) */.modal { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 1; /* Sit on top */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: rgb(0, 0, 0); /* Fallback color */ background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */ padding-top: 60px; } /* Modal Content/Box */.modal-content { background-color: #fefefe; margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */ border: 1px solid #888; width: 80%; /* Could be more or less, depending on screen size */ } /* The Close Button (x) */.close { position: absolute; right: 25px; top: 0; color: #000; font-size: 35px; font-weight: bold; }.close:hover, .close:focus { color: red; cursor: pointer; } /* Add Zoom Animation */.animate { -webkit-animation: animatezoom 0.6s; animation: animatezoom 0.6s } @-webkit-keyframes animatezoom { from { -webkit-transform: scale(0) } to { -webkit-transform: scale(1) } } @keyframes animatezoom { from { transform: scale(0) } to { transform: scale(1) } } /* Change styles for span and cancel button on extra small screens */ @media screen and (max-width: 300px) { span.psw { display: block; float: none; }.cancelbtn { width: 100%; } }

 <h2>Modal Login Form</h2> <h3 class="output"></h3> <button onclick="document.getElementById('id01').style.display='block'" style="width:auto;">Login</button> <div id="id01" class="modal"> <form class="modal-content animate" action="sub2.html" method="POST"> <div class="imgcontainer"> <span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">&times;</span> <img src="img_avatar2.png" alt="Avatar" class="avatar"> </div> <div class="container"> <label for="uname"><b>Student Name</b></label> <input type="text" id="name" placeholder="Enter Username" name="uname"> <label for="psw"><b>Class</b></label> <input type="text" placeholder="Enter Password" name="psw"> <label for="psw"><b>Class Number</b></label> <input type="text" placeholder="Enter Password" name="psw"> <div class="marks"> <label for="psw"><b>First Term Marks</b></label> <input type="text" placeholder="Maths" name="psw"> <input type="text" placeholder="Science" name="psw"> <input type="text" placeholder="Civics" name="psw"> <input type="text" placeholder="Geography" name="psw"> <input type="text" placeholder="Religion" name="psw"> <input type="text" placeholder="Aesthetics" name="psw"> <input type="text" placeholder="Health Science" name="psw"> <input type="text" placeholder="English" name="psw"> <input type="text" placeholder="English Grammer" name="psw"> <input type="text" placeholder="PTS" name="psw"> <input type="text" placeholder="Computer Science" name="psw"> <input type="text" placeholder="Biology" name="psw"> <input type="text" placeholder="Chemistry" name="psw"> <input type="text" placeholder="Physics" name="psw"> <input type="text" placeholder="Combined Maths" name="psw"> <input type="text" placeholder="Commerce" name="psw"> <input type="text" placeholder="Arts" name="psw"> <label for="psw"><b>Second Term Marks</b></label> <input type="text" placeholder="Maths" name="psw"> <input type="text" placeholder="Science" name="psw"> <input type="text" placeholder="Civics" name="psw"> <input type="text" placeholder="Geography" name="psw"> <input type="text" placeholder="Religion" name="psw"> <input type="text" placeholder="Aesthetics" name="psw"> <input type="text" placeholder="Health Science" name="psw"> <input type="text" placeholder="English" name="psw"> <input type="text" placeholder="English Grammer" name="psw"> <input type="text" placeholder="PTS" name="psw"> <input type="text" placeholder="Computer Science" name="psw"> <input type="text" placeholder="Biology" name="psw"> <input type="text" placeholder="Chemistry" name="psw"> <input type="text" placeholder="Physics" name="psw"> <input type="text" placeholder="Combined Maths" name="psw"> <input type="text" placeholder="Commerce" name="psw"> <input type="text" placeholder="Arts" name="psw"> <label for="psw"><b>Third Term Marks</b></label> <input type="text" placeholder="Maths" name="psw"> <input type="text" placeholder="Science" name="psw"> <input type="text" placeholder="Civics" name="psw"> <input type="text" placeholder="Geography" name="psw"> <input type="text" placeholder="Religion" name="psw"> <input type="text" placeholder="Aesthetics" name="psw"> <input type="text" placeholder="Health Science" name="psw"> <input type="text" placeholder="English" name="psw"> <input type="text" placeholder="English Grammer" name="psw"> <input type="text" placeholder="PTS" name="psw"> <input type="text" placeholder="Computer Science" name="psw"> <input type="text" placeholder="Biology" name="psw"> <input type="text" placeholder="Chemistry" name="psw"> <input type="text" placeholder="Physics" name="psw"> <input type="text" placeholder="Combined Maths" name="psw"> <input type="text" placeholder="Commerce" name="psw"> <input type="text" placeholder="Arts" name="psw"> </div> <button type="submit" onclick="all()">Done:</button> </div> <div class="container" style="background-color.#f1f1f1"> <button type="button" onclick="document.getElementById('id01').style.display='none'" class="cancelbtn">Cancel</button> </div> </form> </div>

Answer 1

The problem is you are using the submit button. After clicking on it, the data is being sent and the page is immediately reloaded and all filled data is deleted. The all() function is not executed at all. You need to submit the form via an ajax request so that the page is not refreshed. Here is the article about it https://www.w3schools.com/xml/ajax_intro.asp .

But it's much more convenient to send ajax requests using jQuery library ( https://jquery.com ). So you can connect this library: <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> . There is how use ajax by jQuery: https://www.w3schools.com/jquery/ajax_ajax.asp

If you have difficulties, i can detale write your code, just ask me.