如何使用 javascript 从表单中收集数据并将其存储在变量中？

Question

Hey lets say i have a simple form like this:

<form>
<label for="name">Enter name:</label>
<input type="text" id="name">
<label for="surname">Enter surname:</label>
<input type="text" id="surname">
<label for="number">Phone number:</label>
<input type="text" id="number">
</form>

and in javascript, instead of getting values one by one and storing them with queryselectors, is there a way i can select the whole form and get its input values? also after that how can i store them in variables so i can use them later? for example, print them one by one.

Answer 1

You can use FormData :

 let myForm = document.getElementById('myForm'); let formData = new FormData(myForm); console.log(formData.entries());

 <form id="myForm"> <label for="name">Enter name:</label> <input type="text" id="name"> <label for="surname">Enter surname:</label> <input type="text" id="surname"> <label for="number">Phone number:</label> <input type="text" id="number"> </form>

Answer 2

Bobi. You may use javascript FormData() method.

var formData = new FormData(document.querySelector('form'))

Please check this document. https://developer.mozilla.org/en-US/docs/Web/API/FormData/FormData

Hope this helps. Happy coding~ :)