Disable Submit-Button, es sei denn Urform Daten

Question

hier geändert haben der Code ich verwende:

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

Die Submit-Button standardmäßig auf Deaktiviert eingestellt ist, wenn etwas in einem Eingabetextfeld ändert oder Optionsfeld Zu oder Dropdown-Auswahlwert, dann muss die Schaltfläche auf ENABLED gesetzt werden, indem das deaktivierte Attribut entfernt wird.

Mein Endziel:

EDIT: Wenn etwas auf den Standardwert geändert wird, zurück, so wird die Submit-Button von prop auf disabled gesetzt werden ('disabled', true); - Ich brauche eine Methode, um jede Veränderung im Auge zu behalten.

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

Beispiel: Gehen Sie zu Twitter und melden Sie sich an. Wählen Sie im Dropdown-Menü Einstellungen. Ändern Sie auf der Kontoseite Ihren Benutzernamen (fügen Sie einfach ein zusätzliches Zeichen hinzu), führen Sie als nächstes einen Bildlauf nach unten durch, setzen Sie ein Kästchen auf "aktiviert" und ändern Sie Ihre Länderauswahl.

Die Taste am unteren Rand aktiviert sein, gehen Sie zurück und deaktivieren Sie das Kontrollkästchen Sie vorher geprüft, bleibt die Schaltfläche am unteren Rand aktiviert,

blättern nach oben Änderung Ihrer Username zurück, was Es war, scrollen Sie nach unten, um die Änderungen zu speichern, werden weiterhin aktiviert, gehen Sie zu der Länderliste und änderten Sie wieder auf das, was Sie vorher hatten, jetzt endlich runterscrollen: die Schaltfläche Änderungen speichern wird deaktiviert.

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

EDIT: das scheint sehr ähnlich, What is the best way to track changes in a form via javascript?

Zitat: „. Sie können es standardmäßig deaktiviert machen und JavaScript-Handler die Eingaben für Änderungsereignisse zu beobachten, damit es vielleicht machen einige versteckte Felder oder direkt Render-JavaScript-Werte, um die "Originale" zu speichern, und bei diesen Änderungsereignissen überprüfen Sie die aktuellen Werte gegenüber den Originalen, um zu bestimmen, ob die Schaltfläche aktiviert oder deaktiviert werden soll. - David 18. Jan um 15:14 "(Enable 'submit' button only if a value in the form has been changed) .

Answer 1

Sie müssen nur die Originalwerte speichern und dann prüfen, gegen sie nach jeder Änderung.

Beispiel: 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

Speichern Sie die Standardwerte jedes Felds in einem assoziativen Array mit dem Namen der Eingabe/textarea/select/radio als Schlüssel.

Zum Beispiel:

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

Oder Sie können die Standardwerte auf dem Dokument Last automatisch laden:

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

Als nächstes binden keyup, blur und change Ereignisse auf eine Funktion, wenn überhaupt überprüft Feld wurde von ihrem Standardwert geändert.

$('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:

ich Ihnen jsfiddle nur an.Hier ist der überarbeitete Code:

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

Sie ein Daten-Attribut hinzufügen können die Standardwerte zu halten - für aufgegebenen Typen, die Sie für verwenden können 0 unkontrolliert und 1 für überprüft

<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> 

dann in für jQuery Filter diejenigen zu erhalten, die

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

geändert

FIDDLE

Answer 4

Ich weiß, das ist eine späte Antwort, aber diese Methode verwendet weit weniger Code als die akzeptierte Antwort, ohne dass IDs für Felder und ohne Speichern eines globalen Arrays.

Verwenden Sie einfach .serialize(), um die Daten zu speichern und zu überprüfen, ob sie bei jeder Änderung übereinstimmen.

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