pulsante Disabilita inviare a meno che i dati forma originale è cambiato

Question

Ecco il codice che sto usando:

$('form').bind('keyup change', function(){ 

Il pulsante di invio è impostato su disabilitato di default, se qualcosa cambia all'interno di un campo di testo di input, o un pulsante radio di stato di controllo o il valore di selezione a discesa, quindi il pulsante deve essere impostato ENABLED rimuovendo l'attributo disabilitato.

mia fine OBIETTIVO:

EDIT: Se qualcosa è cambiato di nuovo al suo valore di default, il pulsante di invio è fissato al disabilitati prop ('disabilitato', true); - Ho bisogno di un metodo per tenere traccia di ogni cambiamento.

========================================= ======

Esempio: Andare su Twitter e accedere dal menu a discesa selezionare Impostazioni. Nella pagina Account, cambia il tuo nome utente (aggiungi solo un carattere extra), scorri verso il basso, imposta una casella di spunta su spuntata e cambia la scelta del paese.

Il pulsante viene abilitato in fondo, tornare indietro e deselezionare la casella di controllo è stata selezionata in precedenza, il pulsante in basso rimarrà abilitata,

di scorrimento per il cambiamento in alto il tuo nome utente indietro a quello è stato, scorrere verso il basso il pulsante per salvare le modifiche saranno comunque abilitate, andare alla lista dei paesi e ricondurli a ciò che si aveva in precedenza, ora finalmente scorrere verso il basso: il pulsante Salva le modifiche sarà disabilitato.

============================================= =======

EDIT: questo sembra molto simile, What is the best way to track changes in a form via javascript?

Citazione: ". è possibile renderla disabilitata per default e hanno i gestori JavaScript guardare gli ingressi per eventi di modifica per consentire forse rendere alcuni campi nascosti o direttamente il rendering dei valori JavaScript per memorizzare gli "originali" e, su quegli eventi di modifica, controllare i valori correnti rispetto agli originali per determinare se il pulsante deve essere abilitato o disabilitato .- David 18 gennaio alle 15:14 "(Enable 'submit' button only if a value in the form has been changed) .

Answer 1

Hai solo bisogno di salvare i valori orignal e quindi controllare contro di loro dopo ogni modifica.

Esempio: http://jsfiddle.net/justincook/42EYq/15/

JavaScript:

// Store original values 
var orig = [];    
$("form :input").each(function() { 
    var type = $(this).getType(); 
    var tmp = {'type': type, 'value': $(this).val()}; 
    if (type == 'radio') { tmp.checked = $(this).is(':checked'); } 
    orig[$(this).attr('id')] = tmp; 
}); 

// Check values on change 
$('form').bind('change keyup', function() { 
    var disable = true; 
    $("form :input").each(function() { 
     var type = $(this).getType(); 
     var id = $(this).attr('id');  
     if (type == 'text' || type == 'select') { 
      disable = (orig[id].value == $(this).val()); 
     } else if (type == 'radio') { 
      disable = (orig[id].checked == $(this).is(':checked')); 
     }  
     if (!disable) { return false; } // break out of loop 
    }); 

    $('#submit-data').prop('disabled', disable); // update button 
}); 

// Get form element type 
$.fn.getType = function() { 
    if(this[0].tagName == "INPUT") 
     return $(this[0]).attr("type").toLowerCase() 
    else 
     return this[0].tagName.toLowerCase();   
} 

HTML:

<form id="" action="" method="post"> 
    <input type="text" value="Carl" name="firstname" id="firstname" /> 
    <input type="text" value="Johnson" name="lastname" id="lasttname" /> 
    <input id="radio_1" type="radio" value="female" name="sex" />Female 
    <input id="radio_2" type="radio" value="male" name="sex" />Male 
    <select id="country-list" name="countries"> 
     <option value="xx" selected="">Worldwide</option> 
     <option value="in">India</option> 
     <option value="us">United States</option> 
    </select> 
    <button id="submit-data" disabled="" type="submit">Save changes</button> 
</form> 

Answer 2

Salvare i valori predefiniti di ciascun campo in un array associativo con il nome dell'input/textarea/select/radio.

Ad esempio:

var defaults = { 
    firstname: 'carl', 
    lastname: 'johnson' 
}; 

Oppure si può caricare automaticamente i valori di default sul carico di documento:

$(document).load(function(){ 
    var defaults = {}; 
    // Iterate through all fields in the form and save their values to the default object 
    $('input, select').each(function(){ 
     defaults[$(this).attr('name')] = $(this).val(); 
    }); 
}); 

Avanti, legare keyup, blur, e change eventi a una funzione che controlla se qualsiasi il campo è stato modificato rispetto al loro valore predefinito.

$('input, select').bind('keyup blur change', function(event) 
{ 
    var defaults = defaults; 
    var changed = false; 

    // Iterate through all the fields 
    $('input, select').each(function() 
    { 
     var fieldValue = $(this).val(); 
     var fieldName = $(this).attr('name'); 
     var fieldDefaultValue = defaults[fieldName]; 

     // Check if current field value is different than default 
     if(fieldValue != fieldDefaultValue) 
      changed = true; 
    }); 

    // Disable or enable button based on changed state of form 
    button.prop('disabled', !changed); 
}); 

EDIT:

Ho appena guardato il tuo jsfiddle.Ecco il codice rivisto:

var button = $('#submit-data'); 

$('input, select').each(function() { 
    $(this).data('val', $(this).val()); 
}); 


$('input, select').bind('keyup change blur', function(){ 
    var changed = false; 
    $('input, select').each(function() { 
     if($(this).val() != $(this).data('val')){ 
      changed = true; 
     } 
    }); 

    button.prop('disabled', !changed); 

}); 

Answer 3

È possibile aggiungere una scheda di attributo per contenere i valori di default - per i tipi controllato che è possibile utilizzare 0 per deselezionato e 1 per il controllo

<form id="" action="" method="post"> 
    <input type="text" data-default="Carl" value="Carl" name="firstname" id="firstname" /> 
    <input type="text" data-default="Johnson" value="Johnson" name="lastname" id="lasttname" /> 
    <br /> 
    <br /> 
    <input id="female" type="radio" value="female" name="sex" data-default="0" />Female 
    <br /> 
    <input id="male" type="radio" value="male" name="sex" data-default="0" />Male 
    <br /> 
    <br /> 
    <select id="country-list" name="countries" data-default="xx"> 
     <option value="xx" selected="">Worldwide</option> 
     <option value="in">India</option> 
     <option value="il">Israel</option> 
     <option value="ru">Russia</option> 
     <option value="us">United States</option> 
    </select> 
    <br /> 
    <br /> 
    <button id="submit-data" disabled="" type="submit">Save changes</button> 
</form> 

poi per l'uso jQuery filtro per ottenere quelle che ha cambiato

var button = $('#submit-data'); 
$('form :input').not(button).bind('keyup change', function() { 
    // get all that inputs that has changed 
    var changed = $('form :input').not(button).filter(function() { 
     if (this.type == 'radio' || this.type == 'checkbox') { 
      return this.checked != $(this).data('default'); 
     } else { 
      return this.value != $(this).data('default'); 
     } 
    }); 
    // disable if none have changed - else enable if at least one has changed 
    $('#submit-data').prop('disabled', !changed.length); 
}); 

FIDDLE

Answer 4

So che questa è una risposta in ritardo, ma questo metodo utilizza molto meno codice rispetto la risposta accettata senza bisogno ID su campi e senza memorizzazione di un array globale.

Utilizzare semplicemente .serialize() per memorizzare i dati e verificare se corrisponde a ogni modifica.

http://jsfiddle.net/Pug3H/2/

$('form') 
    .each(function(){ 
     $(this).data('serialized', $(this).serialize()) 
    }) 
    .on('change input', function(){ 
     $(this)    
      .find('input:submit, button:submit') 
       .prop('disabled', $(this).serialize() == $(this).data('serialized')) 
     ; 
    }) 
    .find('input:submit, button:submit') 
     .prop('disabled', true) 
;