skip to Main Content

I created following html form

<form>
<input type="text" name="name1" id="name1" >
<input type="text" name="lastname" id="lastname">
<input type="text" name="age" id="age">
<input type="button">Submit</button>
</form>

I want to input data in this form from the landing page (landing page will display all previously entered record)

Actual form
landing page from where i want o add data into form by clicking Add

Can i do it with java script or any other method ??

2

Answers


  1. <!DOCTYPE html>
    <html>
    <head>
      <title>Form</title>
      <script>
        // Retrieve and populate the form fields with data from localStorage
        window.onload = function() {
          var storedData = JSON.parse(localStorage.getItem('formData'));
          if (storedData) {
            document.getElementById('name1').value = storedData.name1;
            document.getElementById('lastname').value = storedData.lastname;
            document.getElementById('age').value = storedData.age;
          }
        };
    
        // Save the form data to localStorage
        function saveFormData() {
          var name1 = document.getElementById('name1').value;
          var lastname = document.getElementById('lastname').value;
          var age = document.getElementById('age').value;
    
          var formData = {
            name1: name1,
            lastname: lastname,
            age: age
          };
    
          localStorage.setItem('formData', JSON.stringify(formData));
    
          alert('Form data saved!');
        }
      </script>
    </head>
    <body>
      <form>
        <input type="text" name="name1" id="name1">
        <input type="text" name="lastname" id="lastname">
        <input type="text" name="age" id="age">
        <input type="button" value="Submit" onclick="saveFormData()">
      </form>
    </body>
    </html>
    
    Login or Signup to reply.
  2. so let’s assume your first page is on this url, https://example.com/list
    and then the form page is on https://example.com/form

    in the list page you must path values to the form page so in the table you will have something like this

    <tr>
      ....
      <td><a href="/form">add</a></td>
    </tr>
    

    now we have multiple ways to achieve what you want:

    • you can pass an identifier from the record like an id so in that case the url will look something like this <a href="/form?id=123">add</a> or if you have routing handler and you can catch the path parameters it can be <a href="/form/123">add</a> and then in the form page you can catch this identifier and make an ajax to get user info and then update the value of the inputs using JS based on the response on ajax
    • you can pass all the info you need in the url so in that case the url will look like this <a href="/form?name1=name1&lastname=last&age=49">add</a> and in this case you don’t need an ajax on the form page since you already have all the data in the request
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search