英文:
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!
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论