Html Question posted in
Some basic documentation can be found here.

posting data via a html form

i am having an hard time understanding forms, i am submiting a form and saving the data in an array, but once the page is refreshed, the array does not have the data that the form submited. I tried also via a JSON file and inserting data via the POST method, but i am unable to save any type of data coming out of a form… Can someone help me resolve this issue ?

My code looks as follows:

const inputs = document.getElementsByClassName("inputs");
const form = document.querySelector("#form-user");

const [nameText, age, carBrand, textArea] = inputs;

const data = []

form.addEventListener("submit", (event) => {
    event.preventDefault();
    data.push({
        name: nameText.value,
        age: age.value,
        carBrand: carBrand.value,
        textArea: textArea.value
    })
})

I also tried fetching the JSON file after submiting the form, but is also not working:

form.addEventListener("submit", (event) => {
  event.preventDefault();
  fetch("../data/data.json", {
    method: "POST",
    body: JSON.stringify({
      name: nameText.value,
      age: age.value,
      carBrand: carBrand.value,
      textArea: textArea.value
    })
  })

 `

How do i save data coming out of a form ?

Tags:

2

Answers


  1. 0

    When you save the data in an array, it only persists as long as the page does not reload. Once the page reloads, the array reloads with it. All the variables go back to their initial states.
    To persist/save the data, you can use localStorage or a backend database.

    Login or Signup to reply.
  2. 0

    You can use localStorage to save data in client browser, here is the code after editing it:

    const inputs = document.getElementsByClassName("inputs");
const form = document.querySelector("#form-user");

const [nameText, age, carBrand, textArea] = inputs;

const data = JSON.parse(localStorage.getItem('form-data')) || [];

form.addEventListener("submit", (event) => {
    event.preventDefault();
    const formData = {
        name: nameText.value,
        age: age.value,
        carBrand: carBrand.value,
        textArea: textArea.value
    };
    data.push(formData);
    localStorage.setItem('form-data', JSON.stringify(data));
});

    tell me if this works!

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search