How to create an html element and make it stay in the DOM even after reloading the page?-CodePudding

I'm making a website that contains an html form. I coded in JavaScript that when the form is filled and when the button "Publier" is clicked, it creates a table with the information filled in the form. It works, but, when I reload the page, the tables disappear. How can I make the tables stay on the page even after reloading it ?

Here are my html and JavaScript codes :

let button = document.querySelector('button[type="button"]');

button.addEventListener("click", () => {

  let nom = document.getElementById("nom").value;
  let adresse = document.getElementById("adresse").value;
  let capacite = document.getElementById("capacite").value;
  let phone = document.getElementById("phone").value;
  let heure1 = document.getElementById("heure1").value;
  let heure2 = document.getElementById("heure2").value;


  if (nom !== "" && adresse !== "" && capacite !== "" && phone !== "" && heure1 !== "" && heure2 !== "") {
    console.log("");
    btn.style.display = "block";
    party.style.display = "none"
    let table = document.createElement('table');

    document.querySelector('body').appendChild(table);

    let row_1 = document.createElement('tr');
    let heading_1 = document.createElement('th');
    heading_1.innerHTML = "Nom de la pool party";
    let heading_2 = document.createElement('th');
    heading_2.innerHTML = "heure de début";
    let heading_3 = document.createElement('th');
    heading_3.innerHTML = "heure de fin";
    let heading_4 = document.createElement('th');
    heading_4.innerHTML = "adresse";
    let heading_5 = document.createElement('th');
    heading_5.innerHTML = "capacité";
    let heading_6 = document.createElement('th');
    heading_6.innerHTML = "téléphone";

    row_1.appendChild(heading_1);
    row_1.appendChild(heading_2);
    row_1.appendChild(heading_3);
    row_1.appendChild(heading_4);
    row_1.appendChild(heading_5);
    row_1.appendChild(heading_6);
    table.appendChild(row_1);


    let row_2 = document.createElement('tr');
    let row_2_data_1 = document.createElement('td');
    row_2_data_1.innerHTML = nom;
    let row_2_data_2 = document.createElement('td');
    row_2_data_2.innerHTML = heure1;
    let row_2_data_3 = document.createElement('td');
    row_2_data_3.innerHTML = heure2;
    let row_2_data_4 = document.createElement('td');
    row_2_data_4.innerHTML = adresse;
    let row_2_data_5 = document.createElement('td');
    row_2_data_5.innerHTML = capacite;
    let row_2_data_6 = document.createElement('td');
    row_2_data_6.innerHTML = phone;

    row_2.appendChild(row_2_data_1);
    row_2.appendChild(row_2_data_2);
    row_2.appendChild(row_2_data_3);
    row_2.appendChild(row_2_data_4);
    row_2.appendChild(row_2_data_5);
    row_2.appendChild(row_2_data_6);
    table.appendChild(row_2);

    alert("Formulaire envoyé !")
  }

});

<div id="party">
  <h1>Publication</h1>
  <div>
    <label for="nom">Nom de la pool party :</label>
    <input type="text" id="nom" name="nom" placeholder="nom de la pool party" required>
  </div>
  <div>
    <label for="adresse">Adresse de la pool party :</label>
    <input type="text" id="adresse" name="adresse" placeholder="adresse de la pool party" required>
  </div>
  <div>
    <label for="capacite">Capacité d'acceuil :</label>
    <input type="text" id="capacite" name="capacite" placeholder="capacité d'acceuil de la pool party" required>
  </div>
  <div>
    <label for="phone">Numéro de téléphone (facultatif) :</label>
    <input type="text" id="phone" name="phone" placeholder="numéro de téléphone" required>
  </div>
  <div>
    <label for="heure1">Heure de début :</label>
    <input type="text" id="heure1" name="heure1" placeholder="10h15" required>
  </div>
  <div>
    <label for="heure2">Heure de fin :</label>
    <input type="text" id="heure2" name="heure2" placeholder="20h15" required>
  </div>
  <button type="button">Publier</button>
</div>

CodePudding user response：

Add the event.preventDefault() to your .addEventListener("click", function(event){

CodePudding user response：

You can use localstorage, to store form inputs and retrieve it on page load. https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

CodePudding user response：

As AlekseyVY states, local storage is the way to go, see an example here using your code above:

https://jsfiddle.net/2g8nd7hy/2/

let button = document.querySelector('button[type="button"]');
const storageKey = "local"
button.addEventListener("click", () => {
    event.preventDefault()
  let nom = document.getElementById("nom").value;
  let adresse = document.getElementById("adresse").value;
  let capacite = document.getElementById("capacite").value;
  let phone = document.getElementById("phone").value;
  let heure1 = document.getElementById("heure1").value;
  let heure2 = document.getElementById("heure2").value;

  if (nom !== "" && adresse !== "" &&
    capacite !== "" && phone !== "" &&
    heure1 !== "" && heure2 !== "") {
    let btn = document.createElement('btn');
    let party = document.createElement('party');
    btn.style.display = "block";
    party.style.display = "none"
    let table = document.createElement('table');

    document.querySelector('body').appendChild(table);

    let row_1 = document.createElement('tr');
    let heading_1 = document.createElement('th');
    heading_1.innerHTML = "Nom de la pool party";
    let heading_2 = document.createElement('th');
    heading_2.innerHTML = "heure de début";
    let heading_3 = document.createElement('th');
    heading_3.innerHTML = "heure de fin";
    let heading_4 = document.createElement('th');
    heading_4.innerHTML = "adresse";
    let heading_5 = document.createElement('th');
    heading_5.innerHTML = "capacité";
    let heading_6 = document.createElement('th');
    heading_6.innerHTML = "téléphone";

    row_1.appendChild(heading_1);
    row_1.appendChild(heading_2);
    row_1.appendChild(heading_3);
    row_1.appendChild(heading_4);
    row_1.appendChild(heading_5);
    row_1.appendChild(heading_6);
    table.appendChild(row_1);


    let row_2 = document.createElement('tr');
    let row_2_data_1 = document.createElement('td');
    row_2_data_1.innerHTML = nom;
    let row_2_data_2 = document.createElement('td');
    row_2_data_2.innerHTML = heure1;
    let row_2_data_3 = document.createElement('td');
    row_2_data_3.innerHTML = heure2;
    let row_2_data_4 = document.createElement('td');
    row_2_data_4.innerHTML = adresse;
    let row_2_data_5 = document.createElement('td');
    row_2_data_5.innerHTML = capacite;
    let row_2_data_6 = document.createElement('td');
    row_2_data_6.innerHTML = phone;

    row_2.appendChild(row_2_data_1);
    row_2.appendChild(row_2_data_2);
    row_2.appendChild(row_2_data_3);
    row_2.appendChild(row_2_data_4);
    row_2.appendChild(row_2_data_5);
    row_2.appendChild(row_2_data_6);
    table.appendChild(row_2);
    localStorage.setItem(storageKey,
      document.getElementsByTagName('table')[0].outerHTML.toString())
    alert("Formulaire envoyé !")
  }

});
var support = (function() {
  if (!window.DOMParser) return false;
  var parser = new DOMParser();
  try {
    parser.parseFromString('x', 'text/html');
  } catch (err) {
    return false;
  }
  return true;
})();
var stringToHTML = function(str) {
  // If DOMParser is supported, use it
  if (support) {
    var parser = new DOMParser();
    var doc = parser.parseFromString(str, 'text/html');
    return doc.body;
  }
  // Otherwise, fallback to old-school method
  var dom = document.createElement('div');
  dom.innerHTML = str;
  return dom;
};
$(function() {
  if (localStorage.getItem(storageKey) !== null) {
    var str = localStorage.getItem(storageKey)
    var doc = stringToHTML(str)
    document.querySelector('body').appendChild(doc);
  }
});

Hope this helps