How to request all changed form elements?

Question

JavaScript

Hello.

There are many elements on the form that are formed dynamically.

<table class="table">

                                    <c:forEach var="row" items="${rs0.rows}">
                                        <c:set var="SIGNIFICATIVE" value="${row.SIGNIFICATIVE}"/>
                                        <c:set var="ID_SIGNIFICATIVE" value="${row.ID_SIGNIFICATIVE}"/>
                                        <tr>
                                            <td>  <input type="checkbox" id="${ID_SIGNIFICATIVE}" NAME="CHECKBOX_${ID_SIGNIFICATIVE}"></td> <td style="width:50%">${SIGNIFICATIVE}</td>
                                            <td><div class="input-group"><input type="text" class="form-control" id="${ID_SIGNIFICATIVE}" NAME="TEXT_${ID_SIGNIFICATIVE}" > <span class="input-group-addon">,%</span> </div></td>
                                        </tr>
                                    </c:forEach>

                                </table>

Further, the information from these form elements must be entered into the database.
Prompt a method by which it is possible to receive the list of the changed form elements.

Answer 1

it turned out to be done in this way, the state of all form objects is requested here, plus form objects of the type ['checkbox', 'radio', 'button', 'submit'] are filtered out. and only those that have been changed are added to vars_for_update

<SCRIPT language="javascript">
   function GetValue () {
        var result = [];
        var vars_for_update="";
        [].forEach.call(document.querySelector('form').elements, function (el) {
            if (['checkbox', 'radio', 'button', 'submit'].indexOf(el.type) === -1 ) // || el.checked
            {
                //var elem = el.name;
                var defValue = el.defaultValue;
                var currvalue = el.value;
                var index = el.selectedIndex;
                if (index) defValue = el.options[0].value;
                if (defValue == currvalue || index === 0) {
                    result.push(el.name + ' :: ' + el.value+' :: '+" Значение не изменилось");
                } else {
                    result.push(el.name + ' :: ' + el.value+' :: '+" Значение изменилось с " + defValue +
                            "\n  на " + currvalue);
                    vars_for_update=vars_for_update+el.name + '==' + el.value+"<>;";
                }
            }
        });
        demo.innerHTML = result.join('<br>');
        if (vars_for_update!="") {
            document.getElementById("Text_Update").value=vars_for_update;              
        }
    }
</SCRIPT>

Answer 2

All form values ​​can be retrieved using the jQuery .serializeArray() method.
Look at how everything is implemented there and do it in js.
If you are interested in receiving ONLY changed data, after editing each field, write the changed data to the object and send only this data to the database.
You can implement it like this:
Hang a content change listener on each field and write the values ​​to the object when the event occurs.