Is there a 'native' way of the <form> tag to identify changing the original state of a form?

Question

Assuming a form was loaded with 10 text fields with value 1, and the user modified one of these to 0.

When submitting the form, there is something 'native' that identifies it had some change in the value of its fields ?

I want this to differentiate the shooting of an event when the user did or did not make any modifications to the open edit form.

Currently I use a very extensive process for this, when submitting, I receive all variants of the input, I search the data that was in the database, compare field to field to know if there was modification and define which event will be triggered, I think there should be a more efficient way, but I couldn’t find.

I wanted something native or that if naturally for the reason:

I do not write events for a submission, I own a framework with abstract event that does the whole process, since the validation, setar mascaras, concatenation and submission of any form (Since the form has also been generated by the framework), the solution needs to be something that I can convert into something universal, otherwise I cannot implement in the framework.

Example of rendering:

$campo = $VIDB_input->field('campo')->mask('mascara_que_eu_quiser')->type('text')->validator('validacao_que_eu_quiser')->additional_classnames('classnames_que_eu_quiser')->value($data['valor_trazido_do_bd'])->datepicker(false)->dateranger(false)->input(0);
$form_group = $VIDB_form_group->group_cols(12)->input($campo)->input_cols(12)->label('Campo: ')->label_cols(12)->form_group(0);
$submit = $VIDB_button->color('primary')->content('Salvar edições')->addicionalClassnames('pull-right')->event('submit_fake_form|caller|geralOperationalCompanies|save_edited|sectorGeral|closeClosestModalOnSuccess|json|primary-modal|SweetAlertByResponse')->event_post_content(null)->type('submit')->button(0);
$form = $VIDB_fake_form->classnames()->content($form_group.$submit)->form(0);

This code, it does the whole process of:

Render the form, concatenate the data, paste the mask into the input, validate real-time client-side, validate server-side and respond and submit the form, I would need to somehow also be able to make this comparison something global.

Answer 1

You can compare 2 object arrays in the commit, that is the result of the database with the one that will send example...

When giving Ubmit serialize the form and convert to json

var formdata = $("#myform").serializeArray();
var data = {};
$(formdata ).each(function(index, obj){
    data[obj.name] = obj.value;
});

make an ajax request to and return the json database result with php

then just compare the two

if(JSON.stringify(data) == JSON.stringify(banco)) console.log('iguais');

depending on the condition you update or not...

it is worth remembering that the name of the inputs in the form should match with the column name in the bank.

Answer 2

I’m not sure, but you can try the event onChange. If it doesn’t work out, you can use the onChange us input. Behold

Look at the example:

<script>
function myfunction(f){
	alert(f)
}
</script>

<form onchange="myfunction(this)"/>
  <input type="test"/>
  <input type="test"/>
  <input type="test"/>
</form>

The event occurs when the field loses focus. Then the change occurs.