Wie deaktivieren Sie die Schaltfläche Sendern in jQuery, wenn Formularfelder nicht geändert wurden?

StackOverflow https://stackoverflow.com/questions/881144

Frage

Ich habe ein HTML -Formular, das Textfelder, Kontrollkästchen, Radiobuttons und eine Sendetaste enthält.

Ich möchte, dass die Schaltfläche Senden nur dann aktiviert ist, wenn der Inhalt der Felder geändert wird. Jetzt ist hier der Haken: Wenn der Benutzer den Feldinhalt wieder auf Originalwerte verändert, sollte die Schaltfläche Formular erneut deaktiviert werden.

  1. Der ursprüngliche Feldwert "Foo" => Die Schaltfläche Senden ist deaktiviert
  2. Der Feldwert des Benutzers ändert den Feldwert in "bar" => Senden -Schaltfläche wird aktiviert
  3. Der Benutzer des Benutzers ändert den Feldwert wieder auf "foo" => Senden wird erneut deaktiviert

Wie man dies mit erreichen JQuery? Gibt es eine allgemeine Lösung oder Skript, die ich mit irgendeiner Form verwenden könnte?

Bearbeiten: Was ich frage, kann nicht mit einer einfachen schmutzigen Zustandsverfolgung gemacht werden.

War es hilfreich?

Lösung

Verwenden Sie schmutzige Staatsverfolgung. Fügen Sie jeder Eingabesteuerung einen booleschen Wert (z. B. isdirty) an und wechseln Sie ihn, wenn sich der Wert ändert. Beim Übermitteln des Formulars überprüfen Sie, ob sich mindestens ein oder mehrere Werte geändert haben, und senden Sie dann das Formular. Andernfalls zeigen Sie eine Warnung für den Benutzer an.

Eine andere Lösung besteht darin, eine gemeinsame Funktion aufzurufen, wenn sich ein Wert steuert. In dieser Funktion können Sie eine globale Variable (isdirty) auf wahr einstellen, wenn sich etwas geändert und auch die Schaltfläche Senden aktivieren/deaktivieren kann.

var isDirty = false;

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

Generische Funktion für jede Kontrolle

Annahmen: Fügen Sie den Anfangswert jeder Steuerung einem Attribut "Initval" hinzu.

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

In der obigen Funktion, um es generisch zu machen

  1. InitValue - Anfangswert der Kontrolle
  2. Isdirty - Booleaner Wert, der angibt, dass sich der Wert des Steuerelements geändert hat

Andere Tipps

Nur zwei Schritte:

  1. Speichern Sie einen Hash aller Anfangswerte in einer JavaScript -Variablen
  2. Auf dem Verschlechterung jeder Eingabe berechnen sich, die es mit dem gespeicherten Hash -Hash und überprüft. Wenn es dasselbe ist, deaktivieren Sie die Senden -Taste, falls dies nicht der Fall ist, dies aktivieren.

Schauen Sie sich das an die Validierungs-Plug-In.

Dies scheint eine bessere Antwort zu sein.

1401-use-Jquery-to-Leverage-the-Onchange-Methode-of-Inputs.htm

Ich habe nicht getestet, was unten ist :-) Aber ist es das, was du meinst?

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

*-Pike

Es sollte möglich sein, das gesamte Formularobjekt (entweder so wie es ist oder durch Iterieren mit .ach () und das Speichern der Daten in einer Karte) zu speichern und dann die gleichen Werte zu vergleichenden und vergleichen.

Sie können verwenden Dirtyfield Plugin stattdessen und setze desotiTryform: true. Wenn Ihr Formular nun "DirtyForm" -Kurs hat, bedeutet dies, dass Sie nicht gespeicherte Änderungen haben.

Sie können ein JQuery -Skript einrichten, um die Seite auf der Seite zu scannen und nach einem Formular zu überprüfen, die Felder und deren Werte zu inventarisieren und dann gegen dieses Eingabemittel -Array zu überprüfen, wenn eine Eingabe aktualisiert wird.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top