Come disattivare pulsante di invio in jQuery se i campi del modulo non sono stati modificati?

Question

Ho una forma HTML che contiene i campi di testo, caselle di controllo, radiobuttons e un pulsante di invio.

Mi piacerebbe presentare pulsante è attivo solo se contenuto dei campi vengono modificati. Ora qui è il fermo:. se l'utente modifica il contenuto del campo di nuovo a valori originali, il pulsante di modulo dovrebbe essere disabilitato di nuovo

1. valore di campo originale "foo" => presentare pulsante è disattivato
2. cambia utente valore di campo a "bar" => pulsante di invio viene abilitato
3. cambia utente valore del campo torna a "foo" => pulsante di invio viene disattivata di nuovo

Come raggiungere questo obiettivo con jQuery ? ci sono alcun tipo di soluzione generale o uno script che ho potuto usare con qualsiasi forma?

Modifica:. Quello che sto chiedendo non può essere fatto con un semplice monitoraggio dello stato sporco

Answer 1

Utilizza il monitoraggio delle stato di sporcizia. Collegare un valore booleano (ad esempio IsDirty) per ogni ingresso di controllo e commutazione che ogni volta che il valore cambia. Pur presentando il controllo di modulo se almeno uno o più valori sono cambiati e quindi inviare il modulo. In caso contrario, visualizzare un avviso per l'utente.

Un'altra soluzione consiste nel chiamare una funzione comune ogni volta che un valore controlla modifiche. In questa funzione è possibile impostare una variabile globale (IsDirty) true se qualcosa è cambiato e anche abilitare / disabilitare il pulsante di invio.

var isDirty = false;

function SomethingChanged(){
     if( !isDirty ) isDirty = true;
     btnSubmit.disabled = !isDirty;
}

Funzione generico per qualsiasi controllo

Ipotesi: Aggiungere il valore iniziale di ogni controllo per un attributo "InitVal"

function SomethingChanged(control){
     if( control.value != control.InitVal )
          control.IsDirty = true;
     else
          control.IsDirty = false;
}

Nella funzione di cui sopra per rendere più generico si può avere funzioni separate per ogni tipo di controllo come TextBoxChanged e DropDownChanged ecc Ma hanno i seguenti due attributi su ogni controllo

1. InitValue - Valore iniziale del controllo
2. IsDirty - valore booleano che indica che il valore del controllo è cambiato

Answer 2

A due passi:

1. archiviare un hash di tutti i valori iniziali in un javascript variabile
2. onchange di ogni ingresso ricalcola che hash e la verifica con quello memorizzato. se è la stessa, disattivare il pulsante di invio, se non lo è, abilitarlo.

Answer 3

Date un'occhiata alla convalida plug-in .

Answer 4

Questo mi sembra una risposta migliore.

1401 -Utilizzo-jQuery-To-Leverage-The-OnChange-Metodo-Of-Inputs.htm

Answer 5

I havent provato che cosa è al di sotto :-) Ma è questo che vuoi dire?

$(document).ready(function() {
    $("#myform :input").attr("init",$(this).val()).bind("change.dirty", function(evt) {
        if ($(this).val()!=$(this).attr("init")) $(this).addClass("dirty");
        else $(this).removeClass("dirty");
        $('#thebutton').attr("disabled",!$("#myform .dirty").size());
    });
});

* - luccio

Answer 6

Dovrebbe essere possibile salvare l'intero oggetto modulo (sia tal quale, oppure mediante iterazione con .each () e memorizzare i dati in una mappa), e poi fare lo stesso onSubmit e confronta entrambi i valori.

Answer 7

È possibile utilizzare dirtyField plug invece e impostare denoteDirtyForm: true. Ora, se il modulo è "dirtyForm" classe significa avere modifiche non salvate.

Answer 8

Che cosa si potrebbe fare è installato uno script jQuery per acquisire la pagina al caricamento della pagina e verificare la presenza di un modulo, l'inventario dei campi ed i loro valori, e quindi controllare contro tale matrice di riferimento in ingresso ogni volta che un ingresso viene aggiornata.