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