1$('form').serializeArray()
2// gives
3// [ {"name":"foo","value":"1"},
4// {"name":"bar","value":"xxx"},
5// {"name":"this","value":"hi"} ]
6
7
8// or
9
10$('form').serialize() // gives : "foo=1&bar=xxx&this=hi"
1const form = document.querySelector('form');
2const data = new FormData(form);
3
1<html>
2 <form id="myForm">
3 <input type="text" name="email" value="user@example.com">
4 </form>
5 <p id='text'></p>
6
7 <script>
8 window.setInterval(()=>{
9 var myForm = document.getElementById('myForm');
10 var text = document.getElementById('text');
11
12 text.innerText = myForm.elements['email'].value;
13 }, 1);
14 </script>
15</html>
1// return data in key value pair
2$('#form').serializeArray().reduce(function(obj, item) {
3 obj[item.name] = item.value;
4 return obj;
5}, {});
1document.addEventListener('submit', function (event) {
2
3 event.preventDefault();
4
5 fetch('https://xxx.xxx', {
6 method: 'POST',
7 body: new FormData(event.target),
8 }).then(function (response) {
9 if (response.ok) {
10 return response.json();
11 }
12 return Promise.reject(response);
13 }).then(function (data) {
14 console.log(data);
15 })
16});
17