通过HTML表单发布数据

huangapple go评论67阅读模式
英文:

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?

英文:

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 ?

答案1

得分: 0

当您将数据保存在数组中时,它仅在页面不重新加载时持久存在。一旦页面重新加载,数组也会重新加载。所有变量都会恢复到它们的初始状态。
要使数据持久化/保存,您可以使用localStorage或后端数据库。

英文:

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.

答案2

得分: 0

你可以使用 localStorage 在客户端浏览器中保存数据,以下是编辑后的代码:

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

请告诉我这是否有效!

英文:

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!

huangapple
  • 本文由 发表于 2023年2月18日 11:42:46
  • 转载请务必保留本文链接:https://go.coder-hub.com/75491027.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定