Is there a way to save html forms in other html document as a table?

Question

Is there a way to do this, and if possible, is there a way to reference those stored values from the forms, ie. I want to fill a form, and then to call the values from the form via button on the html page? Here just for an advice, hope this post won't get deleted.

Ok this is the code, but somehow i am getting null values everywhere after i submit the form. please help here

   <form class="container jumbotron">
        <div class="form-row">
          <div class="col-md-4 mb-3">
            <label for="FirstName">First Name</label>
            <input type="text" class="form-control" id="FirstName" name="name" required>
          </div>
          <div class="col-md-4 mb-3">
            <label for="LastName">Last Name</label>
            <input type="text" class="form-control" id="LastName" required>
          </div>
          <div class="col-md-2 mb-3">
              <label for="Age">Age</label>
              <input type="number" class="form-control" id="Age" required>
          </div>
          <div class="col-md-2 mb-3">
            <label for="Sex">Sex</label>
            <select class="custom-select" id="Sex" required>
              <option selected disabled value="">Select gender</option>
              <option value="Male">Male</option>
              <option value="Female">Female</option>
            </select>
          </div>
    </div>
        <div class="form-row">
            <div class="col-md-3 mb-3">
                <label for="City">Address</label>
                <input type="text" class="form-control" id="Address" required>
              </div>
              <div class="col-md-3 mb-3">
                <label for="PhoneNumber">Phone Number</label>
                <input type="tel" class="form-control" pattern="^\d{3}\d{3}\d{3}$" id="PhoneNumber" required>
              </div>
            <div class="col-md-3 mb-3">
                <label for="Email">Email</label>
                <input type="email" class="form-control" id="Email" name="email" required>
              </div>
            <div class="col-md-3 mb-3">
                <label for="Email">Secondary Email</label>
                <input type="email" class="form-control" id="SecondaryEmail">
              </div>
        </div>
        <div class="form-row">
        <div class="col-md-3 mb-3">
            <label for="date">Birthday</label><br>
            <input type="date" id="Birthday" class="form-control" name="datemax" min="1900-01-01" max="2020-01-01" required>           
          </div>
        </div>

        <div class="form-group">
          <div class="form-check">
            <input class="form-check-input" type="checkbox" value="" id="checkbox" required>
            <label class="form-check-label" for="checkbox">
              I agree to terms and conditions
            </label>
          </div>
        </div>
        <button class="btn btn-primary" type="submit" id="submit">Add new contact</button>       
      </form>

And this is the js file

let list1 = [];
const addlist1 = (event)=>{
event.preventDefault();
let list12 = {
id: Date.now(),
FirstName: document.getElementById('FirstName').nodeValue,
LastName: document.getElementById('LastName').nodeValue,
Age: document.getElementById('Age').nodeValue,
Sex: document.getElementById('Sex').nodeValue,
Address: document.getElementById('Address').nodeValue,
PhoneNumber: document.getElementById('PhoneNumber').nodeValue,
Email: document.getElementById('Email').nodeValue,
SecondaryEmail: document.getElementById('SecondaryEmail').nodeValue,
//Birthday: document.getElementById('Birthday').nodeValue

}
list1.push(list12);
document.forms[0].reset();

localStorage.setItem('clients', JSON.stringify(list1));
}
document.addEventListener('DOMContentLoaded' , ()=> {
document.getElementById('submit').addEventListener('click', addlist1);
});

what you could do is save the form values as `cookie` on submit and then on html page get the values from the cookies — Abdullah Abid, Mar 12 '20 at 17:18
Thanks for the advice bro, I just found the solution to my problem, will use js objects, because i need the data even after shutting down the browser, and the last thing i need to do is to show these values as buttons in the browser, instead of raw data, if anyone has an idea how to do that, would be nice to share it. — Hristijan Bosheski, Mar 12 '20 at 17:30
you can use persistent `cookie` using Javascript , take a look at https://stackoverflow.com/questions/8733025/setting-persistent-cookies-with-javascript , as for the buttons , you need to pull out the required data and render that in the `button` tag (can't say much on that without actually seeing what the data is) — Abdullah Abid, Mar 12 '20 at 17:41
The data is basically strings, number values, there is a datepicker, and formated phone number. The post you pointed out helps, but i have in mind some simplified solution, as the button takes all the values, shows them with click on the same document in html, and the name the button has, is the two strings (name and lastname). That is all the details. Thanks for your help though. — Hristijan Bosheski, Mar 12 '20 at 18:01
I dont know if i can add the code here, or just edit the question for some help, I am glad to say that i solved my problem with storing the data. — Hristijan Bosheski, Mar 12 '20 at 18:06
you can edit the question and add the code in the comment as well (although i wouldn't recommend adding code in the comment section ) — Abdullah Abid, Mar 12 '20 at 18:09

score 0 · Answer 1 · answered Mar 12 '20 at 19:20

you wanna use document.ready event which signals that the DOM of the page is now ready,so in the head of the html file you would add

<!-- jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

and remove the DOMContentLoaded loaded event

JS File

$(document).ready(function() {
  let list1 = [];

  const addlist1 = event => {
    event.preventDefault();
    let list12 = {
      id: Date.now(),
      FirstName: document.getElementById("FirstName").nodeValue,
      LastName: document.getElementById("LastName").nodeValue,
      Age: document.getElementById("Age").nodeValue,
      Sex: document.getElementById("Sex").nodeValue,
      Address: document.getElementById("Address").nodeValue,
      PhoneNumber: document.getElementById("PhoneNumber").nodeValue,
      Email: document.getElementById("Email").nodeValue,
      SecondaryEmail: document.getElementById("SecondaryEmail").nodeValue
      //Birthday: document.getElementById('Birthday').nodeValue
    };
    list1.push(list12);
    document.forms[0].reset();

    localStorage.setItem("clients", JSON.stringify(list1));
  };

  document.getElementById("submit").addEventListener("click", addlist1);
});

Is there a way to save html forms in other html document as a table?

1 Answers1