javascript - Form Event Handling Pattern -

i using backend ideal send ajax post request rather using default action on forms.

with in mind, need extract final fields selected in form.

i have various text fields, radio buttons, checkboxes, etc.

i've struggled gaining understanding of event delegation , event propagation. i'm not entirely sure if topic should worried trying achieve.

i know can write code grabs of information in form placing id on each field , have function extract each value on id such as:

function example(){   var field0 = $('#field0').val();   var field1 = $('#field1').parent().hasclass('active')   // ... , more      } 

i've used pattern while , don't feel efficient.

i have 2 pattern idea, still not sure if "common practice"

1. since not concerned data in each field until form submitted, run loop on of input based fields on form , extract contents, instead of assigning id each individual input field.

2. i can listen changes on form (i not sure how this, event delegation/propagation come play). instead of waiting submit button gather info in form, have type of listener detects change on form (not sure if possible).

i've been using current pattern several months , improve myself, if has suggestions, links, or criticism thoughts on new approach i'd appreciate it.

so, propose 3 ways form fields value on submit (or similar event):

1. hard-code ids , retrieve values, e.g.

var field_a = document.getelementbyid('a')   , field_b = document.getelementbyid('b')   , form = document.getelementbyid('my_form');  form.addeventlistener('submit', function() {   fetch('//your/api/endpoint', {     method: 'post',     body: json.stringify({a: field_a.value, b: field_b.value})   }); }); 

2. loop , retrieve values, e.g.

var form = document.getelementbyid('my_form');  form.addeventlistener('submit', function() {   var values = [].reduce.call(     form.queryselectorall('input, textarea, select'),     function(values, element) {       values[element.name] = element.value;       return values;     },     {}   );    fetch('//your/api/endpoint', {     method: 'post',     body: json.stringify(values)   }); }); 

3. watch changes inside form, accumulate them

var form = document.getelementbyid('my_form')   , state = {};  form.addeventlistener('change', function(e) {   state[e.srcelement.name] = e.value; }); form.addeventlistener('submit', function() {   fetch('//your/api/endpoint', {     method: 'post',     body: json.stringify(state)   }); }); 

from performance perspective, option 1. fastest, followed 2 followed 3 (with last 2 i'm not 100% certain, queryselectorall can expensive, listening tons of change events might -- depends on how change events triggered i'd say).

from development perspective (how long take set form), 2 , 3 should not different both generic (and can use code sample start).

"real" data-binding (like angular) or "pure state" (like react) pretty come down options 2/3 (just framework perform heavy lifting you).

regarding option 3 (listening change on whole form): https://stackoverflow.com/a/4616720/1168892 explains quite how event bubbling in javascript happens. use have make sure no element inside form cancels change event (otherwise not bubble form itself). not cancel events default behavior, have explicitly make wrong (and can have eye on in implementation).

---

i didn't use jquery in examples can done browsers directly now. used element.queryselectorall, array.reduce , window.fetch.