Utilizzando jQuery, come posso sapere se un modulo è cambiato?

Question

Voglio sapere se un modulo è stato modificato. Il modulo può contenere qualsiasi elemento del modulo, come input, select, textarea, ecc. Fondamentalmente, voglio un modo per mostrare all'utente che hanno unsaved cambiato in un form.

Come posso farlo utilizzando jQuery?

per chiarire: voglio prendere alcuna modifica del modulo, non solo per elementi di input, ma a tutti gli altri elementi del modulo così, textarea, selezionare ecc

Answer 1

L'approccio che di solito prendere in tale caso è che controllo il valore del modulo serializzato. Quindi l'idea è di calcolare lo stato della forma iniziale con il metodo $.fn.serialize. Quindi, quando necessario, basta confrontare lo stato corrente con la stringa serializzata originale.

Per scegliere come target tutti gli elementi di input (selezionare, area testo, casella di controllo, input-testo, ecc.) All'interno di un modulo è possibile utilizzare lo pseudo-selettore :input.

Ad esempio:

var $form = $('form'), 
 
    origForm = $form.serialize(); 
 

 
$('form :input').on('change input', function() { 
 
    $('.change-message').toggle($form.serialize() !== origForm); 
 
});

.change-message { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form> 
 
    <div class="change-message">You have unsaved changes.</div> 
 
    <div> 
 
     <textarea name="description" cols="30" rows="3"></textarea> 
 
    </div> 
 
    <div>Username: <input type="text" name="username" /></div> 
 
    <div> 
 
     Type: 
 
     <select name="type"> 
 
      <option value="1">Option 1</option> 
 
      <option value="2" selected>Option 2</option> 
 
      <option value="3">Option 3</option> 
 
     </select> 
 
    </div> 
 
    <div> 
 
     Status: <input type="checkbox" name="status" value="1" /> 1 
 
     <input type="checkbox" name="status" value="2" /> 2 
 
    </div> 
 
</form>