Comment désactiver le bouton Soumettre dans jQuery si les champs de formulaire n'ont pas été modifiés?

Question

J'ai un formulaire HTML qui contient des champs de texte, des cases à cocher, des radiobuttons et un bouton de soumission.

Je voudrais que le bouton Soumettre ne soit activé que si le contenu des champs est modifié. Maintenant, voici la capture: Si l'utilisateur modifie le contenu du champ vers les valeurs d'origine, le bouton de formulaire doit être désactivé à nouveau.

1. Valeur de champ d'origine "FOO" => Le bouton Soumettre est désactivé
2. Modifications de l'utilisateur Valeur de champ sur "bar" => Le bouton Soumettre devient activé
3. Utilisateur modifie la valeur du champ sur "foo" => le bouton Soumettre redevient désactivé

Comment réaliser cela avec jquery? Y a-t-il une sorte de solution générale ou de script que je pourrais utiliser avec n'importe quel formulaire?

Edit: Ce que je demande ne peut pas être fait avec un simple suivi de l'état sale.

Answer 1

Utilisez le suivi de l'état sale. Attachez une valeur booléenne (par exemple, isdirty) à chaque contrôle d'entrée et basculez-le chaque fois que la valeur change. Lors de la soumission du formulaire, vérifiez si au moins une ou plusieurs valeurs ont changé, puis soumettez le formulaire. Sinon, affichez une alerte à l'utilisateur.

Une autre solution consiste à appeler une fonction commune chaque fois qu'une valeur de contrôle change. Dans cette fonction, vous pouvez définir une variable globale (isdirty) sur true si quelque chose a changé et également activer / désactiver le bouton Soumettre.

var isDirty = false;

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

Fonction générique pour tout contrôle

Hypothèses: ajoutez la valeur initiale de chaque contrôle à un attribut "Initval"

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

Dans la fonction ci-dessus pour le rendre générique, vous pouvez avoir des fonctions distinctes pour chaque type de contrôle comme TextBoxChanged et DropdownChanged, mais ont les deux attributs suivants sur chaque contrôle

1. InitValue - valeur initiale du contrôle
2. Isdirty - valeur booléenne indiquant que la valeur du contrôle a changé

Answer 2

Juste deux étapes:

1. stocker un hachage de toutes les valeurs initiales dans une variable JavaScript
2. Onchange de chaque entrée recalcule qui le hache et le vérifie avec celui stocké. Si c'est la même chose, désactivez le bouton Soumettre, si ce n'est pas le cas, activez-le.

Answer 3

Jetez un œil au Plug-in de validation.

Answer 4

Cela semble être une meilleure réponse.

1401-USING-JQUERY-TO-LEFETURE-LE-ONCHANGE-MÉTHOD-OFFUS.HTM

Answer 5

Je n'ai pas testé ce qui est ci-dessous :-) Mais c'est ce que tu veux 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());
    });
});

*-brochet

Answer 6

Il devrait être possible d'enregistrer l'ensemble de l'objet de formulaire (soit tel qu'il est, soit en itérant avec .each () et en stockant les données sur une carte), puis à faire la même surbmitte et à comparer les deux valeurs.

Answer 7

Vous pouvez utiliser sale Plugin à la place et définissez DÉNODIRTYFORM: TRUE. Maintenant, si votre formulaire a une classe "Dirtyform" signifie que vous avez des changements non sauvés.

Answer 8

Ce que vous pourriez faire, c'est configurer un script jQuery pour scanner la page sur le chargement de la page et vérifier un formulaire, inventaire les champs et leurs valeurs, puis vérifiez ce tableau de référence d'entrée chaque fois qu'une entrée est mise à jour.