how to create an html table from an html form using javascript

I have created an html form and I would like that each time someone fills the form, an html table is created and filled with the information retrieved in the form, all in javascript if possible, although I am open to other possibilities.

I already tried to do it, but it doesn’t work. It justs create one table at the start of the site whithout the information of the form and doesn’t create any table when someone fills the form. Maybe it’s because of the button submit, it reloads the page automatically, so maybe the table has not even the time to load and the page is reload. But I don’t know how to fix it, I hope you will. Maybe there are also other things to fix in my code, so I will be grateful to you if you correct me.

I put the code below:

Formulaire html:

<div id="party">
        <form action="">
        <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="submit">Publier</button>
    </div>

Javascript code:

let btn = document.getElementById("nav");
let party = document.getElementById("party");
let ntable = 0;

btn.addEventListener("click", () => {
    btn.style.display = "none";
    party.style.display = "block"
});

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

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

    localStorage.setItem("nom", document.querySelector("#nom").value);
    localStorage.setItem("adresse", document.querySelector("#adresse").value);
    localStorage.setItem("capacite", document.querySelector("#capacite").value);
    localStorage.setItem("phone", document.querySelector("#phone").value);
    localStorage.setItem("heure1", document.querySelector("#heure1").value);
    localStorage.setItem("heure2", document.querySelector("#heure2").value);
    
    if (document.querySelector("#nom").value !== "" && document.querySelector("#adresse").value !== "" && document.querySelector("#capacite").value !== "" && document.querySelector("#phone").value !== "" && document.querySelector("#heure1").value !== "" && document.querySelector("#heure2").value !== "") {
 
        
        console.log("");
        ntable = 1;
}

});

if (ntable = 1) {
    localStorage.setItem("nom", document.querySelector("#nom").value);
    localStorage.setItem("adresse", document.querySelector("#adresse").value);
    localStorage.setItem("capacite", document.querySelector("#capacite").value);
    localStorage.setItem("phone", document.querySelector("#phone").value);
    localStorage.setItem("heure1", document.querySelector("#heure1").value);
    localStorage.setItem("heure2", document.querySelector("#heure2").value);
    
        let table = document.createElement('table');
        let td = document.querySelector('td');
        let tr = document.querySelector('tr');

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

        let row_1 = document.createElement('tr');
        let heading_1 = document.createElement('td');
        heading_1.innerHTML = "Nom de la pool party";
        let heading_2 = document.createElement('td');
        heading_2.innerHTML = "heure de début";
        let heading_3 = document.createElement('td');
        heading_3.innerHTML = "heure de fin";
        let heading_4 = document.createElement('td');
        heading_4.innerHTML = "adresse";
        let heading_5 = document.createElement('td');
        heading_5.innerHTML = "capacité";
        let heading_6 = document.createElement('td');
        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 = document.querySelector("#nom").value;
        let row_2_data_2 = document.createElement('td');
        row_2_data_2.innerHTML = document.querySelector("#heure1").value;
        let row_2_data_3 = document.createElement('td');
        row_2_data_3.innerHTML = document.querySelector("#heure2").value;
        let row_2_data_4 = document.createElement('td');
        row_2_data_4.innerHTML = document.querySelector("#adresse").value;
        let row_2_data_5 = document.createElement('td');
        row_2_data_5.innerHTML = document.querySelector("#capacite").value;
        let row_2_data_6 = document.createElement('td');
        row_2_data_6.innerHTML = document.querySelector("#phone").value;

        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);

        table.style.background = "white";
        table.style.color="black";
        table.style.textAlign = "center";
        table.style.border = "1px solid black";
        td.style.border = "1px solid black";
        tr.style.border = "1px solid black";
        ntable = 0;
};

Leave a Comment