This might be a broad answer to give but i\'l try to shorten it up. What i am trying to do is use a form to get some information from the user and \"validate the form\" using Ja
First off, you want to validate data in a form using JavaScipt. That is simple you could run all of your checks and validate, but the problem that comes next is what do you want your site to do. You want the data to reflect on the page but you haven't mentioned to us the goal of your website. See if I had something simple and wanted to run checks on a form and output somewhere else on the website it is as simple as:
Same Page Validation
- Grabbing data from form
- In the form submit code run validate checks on your inputs either using functions or if statements. (google each for best practices).
- What if a validation fails? you have to handle that by appending notices to the html to show the user that an error validating has occurred.
- Once your form is finished validating, you have to e.preventDefault() which will prevent site from loading.
- If the validation worked, grabbed the values of the form input and append them to a html element so you could output them.
Ok but as you can see there are 100's of ways for you to do this even without having a form go through the submission process. Why not just run a function on a onClick that runs the same validation and returns you the data then you could append that to the html.
But on another note, the reason why your data gets deleted is because the form is trying to do something with the data and when the page refreshes nothing happened with it so everything is lost. The proper way to do this is you were trying to build an application would go like this:
Normal Form Submission
- Once input from user is entered and submit button clicked. Run validation, if any errors prevent form from submitting but if no errors continue
- Run back end validation on your lets say php file. Run the same validation you did in JS but in PHP or your preferred back end language. If there are any errors you need to study up on displaying php errors on form submission to the user.
- If everything works you could store the user information in a database, then query for a specific user.
- If you want same page no reloading information showing you need to study on ajax with php. It's good practice and really cool once you have it working.
- in order to show the user information you also have to think about when grabbing data from backend. if you are going to show the user that was just entered then you can grab last user of the list.
There are so many ways to go about it and to put the code for all of it to work will take way more time but I hope I gave you an idea of what you could do.