2

Supondo que um formulário foi carregado com 10 campos text com valor 1, e o usuário modificou um desses para 0.

Ao submeter o formulário, existe algo 'nativo' que identifique que o mesmo teve alguma mudança no valor de seus campos ?

Quero isso para diferenciar o disparo de um evento quando o usuário fez ou não fez nenhum modificação no form de edição aberto.

Atualmente eu uso um processo bem extenso pra isso, ao submeter, recebo todas as variantes dos input, busco o dado que estava no banco, comparo campo a campo pra saber se houve modificação e definir qual será o evento disparado, acho que deva haver um modo mais eficiente, mas não consegui encontrar.

Eu queria algo nativo ou que se de de forma natural pelo motivo:

Eu não escrevo eventos para uma submissão, eu possuo um framework com evento abstrato que faz todo o processo, desde a validação, setar mascaras, a concatenação e a submissão de qualquer formulário (Desde que o formulário também tenha sido gerado pelo framework), a solução precisa ser algo que eu possa converter em algo universal, caso contrário não consigo implementar no framework.

Exemplo de renderização:

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

Esse código, faz todo o processo de:

Renderizar o form, concatenar os dados, colcocar a máscara no input, validar client-side real-time, validar server-side e responder e submeter o form, eu precisaria de alguma forma também conseguir tornar essa comparação algo global.

5
  • 2
    Nativo não. Podes gerar um JSON no arranque da página e comparar contra esse JSON.
    – Sergio
    Commented 20/09/2017 às 14:22
  • Você diz storar(armazenar kk) um json com os valores na renderização do gráfico e verificar antes de submeter? Commented 20/09/2017 às 14:24
  • @AnthraxisBR Sim, por exemplo. Se fores mais especifico com exemplos de que tipo de formulário é podemos ter outras ideias/soluções
    – Sergio
    Commented 20/09/2017 às 14:27
  • @DiegoSantos se o utilizador mudar e depois mudar de volta para o original vai dar um falso positivo.
    – Sergio
    Commented 20/09/2017 às 14:27
  • @Sergio vou complementar a pergunta, pois tem um pequeno impecilio nisso porque eu uso um framework próprio Commented 20/09/2017 às 14:27

2 Respostas 2

5

Você pode comparar 2 arrays de objetos na submissão, ou seja o resultado do banco com o que irá enviar exemplo...

Ao dar submit serialize o formulário e converta para json

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

faça uma requisição ajax para e devolva o resultado do banco em json com php

ai é só comparar os dois

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

dependendo da condição você atualiza ou não...

vale lembrar que o nome dos inputs no form devem bater com o nome da coluna no banco.

1
  • boa, acho que isso vai resolver, vou fazer uns testes só pra ver se consigo serializar do mesmo formato que eu consigo trazer do banco, mas acredito que vá dar certo sim. Commented 20/09/2017 às 16:24
3

Não tenho certeza, mas você pode tentar o evento onChange. Se não der certo, você pode usar o onChange nos input. Veja

Olhe o exemplo:

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

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

O evento ocorre quando o campo perde o foco. Aí a mudança ocorre.

4
  • 1
    Não sei se seria uma boa ideia, pois eu teria que disparar em cada input, acabaria fazendo a mesma coisa que faço agora, só que em vez do PHP estaria fazendo client-side Commented 20/09/2017 às 14:29
  • Editei a resposta. Dá uma olhada. Commented 20/09/2017 às 14:34
  • 1
    Não é exatamente esse o objetivo, o objetivo e comparar ESTADO_DE_CARREGAMENTO X ESTADO_NA_SUBMISSÃO, desse jeito eu identificaria mudanças, mas não identificaria como estava x como está agora, sacou ? Commented 20/09/2017 às 14:37
  • Entendo. Neste caso, te recomendo no momento do carregamento da página você armazenar o form numa variável como um document.getElementByTagName('form')[0]; , depois, quando a myFunction for chamada, basta comparar o f com a form armazenado, ou ainda, comparar os dados. É trabalhoso, mas não vejo outra forma. Atém porque, se você serializar o form, pode ser que o json saia em uma ordem distinta e ai a sua comparação não dará certo. Commented 20/09/2017 às 14:43

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .