1

Tenho um formulário que abre num modal do bootstrap que é preenchido de forma dinâmica com jquery, este formulário fica habilitado para edição, e neste modal tem um botão "Salvar alterações", que quero que execute uma ação somente se algum campo do formulário for alterado do estado original, como posso fazer isso?

1
  • Podes mostrar parte ou todo o HTML do formulário? e de onde vêm o código que monta o formulário? via ajax? ou a página carrega já com essa informação?
    – Sergio
    26/06/2017 às 7:15

2 Respostas 2

3

Pode usar o serialize do jQuery.

Através dele você pode salvar o estado dos valores dos campos do formulário quando ele é carregado. Quando enviar o formulário, você pode chamar novamente e comparar com o estado salvo inicialmente e tomar a ação que for necessária.

Segue um exemplo:

var inicial = $("form").serialize();

$("form").on("submit", function(e) {
  e.preventDefault();
  var atual = $("form").serialize();
  if (atual !== inicial) {
    // modificou, pode submeter o form via ajax...
    alert("modificou");
  }
});
<!DOCTYPE html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>

<head>
  <meta charset="utf-8">
  <title>Demo Formulario</title>
</head>

<body>

  <form>
    <select name="select">
    <option value="">Selecione...</option>
    <option value"1">Item 1</option>
    <option value="2">Item 2</option>
  </select>
    <br>
    <input type="checkbox" name="check" value="check1" id="ch1">
    <label for="ch1">Sim</label>
    <br>
    <input type="radio" name="radio" value="radio1" checked="checked" id="r1">
    <label for="r1">Opção 1</label>
    <input type="radio" name="radio" value="radio2" id="r2">
    <label for="r2">Opção 2</label>
    <br>
    <input name="text">
    <br>
    <br>
    <button type="submit">Enviar</button>
  </form>

</body>

</html>

2

Utilizando o sessionStorage para armazenar o form inicial, depois só comparar, vale ressaltar o uso do serialize() do jQuery.

$(function () {
                if (sessionStorage) {
                    sessionStorage.setItem('form', jQuery('form').serialize());
                }
                $('#salvar').click(function () {
                    if (jQuery('form').serialize() === sessionStorage.getItem('form')) {
                        alert('Não existe alteração');
                    }else {
                        alert('Existe alteração ');
                    }
                });
            });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
            <input name="nome" id="nome" type="text">
            <input name="usuario" id="usuario" type="text">
            <input name="email" id="email" type="text">
            <input type="button" value="salvar" id="salvar">
        </form>

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 .