Comment rédiger une fonction de détection de mise à jour de formulaire générique dans JavaScript

Points de base

• La fonction FormChanges() dans JavaScript détecte les mises à jour de n'importe quelle forme en acceptant un seul paramètre de formulaire surchargé (le nœud Dom du formulaire ou ID de chaîne) et renvoie un tableau de nœuds d'élément de formulaire que l'utilisateur a modifiés.
• Si le formulaire n'est pas trouvé, la fonction renvoie NULL et est conçue pour être compatible avec toutes les bibliothèques JavaScript et exécuter dans tous les navigateurs modernes, y compris IE6 et IE7.
L'application réelle de la fonction
• FormChanges() inclut de rappeler les utilisateurs du nombre de mises à jour de champ qu'ils ont effectuées, ou de mettre à jour des valeurs masquées pour indiquer qu'aucune modification n'a été apportée, permettant au code côté serveur de sauter la validation du champ et les mises à jour de la base de données.

Dans le post précédent, nous avons appris à vérifier si l'utilisateur a changé les éléments de formulaire individuels. Aujourd'hui, nous utiliserons ces informations pour écrire du code JavaScript qui peut détecter les mises à jour de formulaire. Voici quelques exemples et liens de code: - Page de démonstration de code - FormChanges() Code JavaScript - Fichier zip pour tous les codes et exemples

Précautions

En tant que bon développeur, nous définirons nos exigences avant d'écrire un code: - Nous écrivons une fonction FormChanges() qui accepte un paramètre de formulaire Form surchargé unique - le nœud Dom ou le formulaire du formulaire. - Cette fonction renverra un tableau de nœuds d'éléments de formulaire que l'utilisateur a modifiés. Cela nous permet de déterminer quels champs ont changé, ou si le tableau est vide, cela signifie qu'aucun champ n'a changé. - Si le formulaire n'est pas trouvé, la fonction renvoie null. - Nous ne comptons pas sur une bibliothèque JavaScript spécifique, donc la fonction est compatible avec toutes les bibliothèques. - Il doit fonctionner dans tous les navigateurs modernes, y compris IE6 ou IE7.

FormChanges () Fonction

Pour une compréhension facile, ce qui suit est le début de notre fonction:

function FormChanges(form) {

Nous surchargez le paramètre de formulaire - il peut être un élément DOM, mais s'il s'agit d'une chaîne d'ID, nous devons trouver l'élément dans le dom:

if (typeof form == "string") form = document.getElementById(form);

Si nous n'avons pas de nœud de formulaire, la fonction renvoie null sans autre opération:

if (!form || !form.nodeName || form.nodeName.toLowerCase() != "form") return null;

Nous allons désormais déclarer certaines variables, que nous utiliserons tout au long de la fonction: - changed est le tableau d'élément de formulaire mis à jour de l'utilisateur renvoyé - n est l'option par défaut de l'élément - c Si l'élément a changé, défini sur true- def sont des variables temporaires par défaut utilisé o ol Nous pouvons maintenant démarrer notre boucle principale, qui vérifie à son tour chaque élément de formulaire. opt est initialement défini sur False, indiquant que l'élément que nous vérifions n'a pas changé:

function FormChanges(form) {

Ensuite, nous extraireons le nom du nœud (entrée, textarea, sélectionnez) et le vérifierons dans l'instruction Switch. Nous ne recherchons que des nœuds sélectionnés et non sélectionnés, donc l'instruction Switch n'est pas strictement nécessaire. Cependant, il est plus facile à lire et nous permet d'ajouter plus de types de nœuds lors de l'introduction de nouveaux types de nœuds.

Notez que la plupart des navigateurs renvoient les noms de nœuds en majuscules, mais pour des raisons de sécurité, nous convertissons toujours les chaînes en minuscules.

if (typeof form == "string") form = document.getElementById(form);

La première instruction de cas évalue la liste déroulante de sélection. Il s'agit de la vérification la plus complexe car nous devons parcourir tous les éléments de sous-option pour comparer les propriétés sélectionnées et par défaut.

La boucle définit également Def à la dernière option avec la propriété "sélectionnée". Si nous avons une boîte de radio, nous comparons Def avec la propriété SelectedIndex du nœud pour nous assurer que nous traitons des cas où il n'y a pas d'options ou d'éléments d'options multiples avec la propriété "sélectionnée" (voir le post précédent pour une description complète).

if (!form || !form.nodeName || form.nodeName.toLowerCase() != "form") return null;

Maintenant, nous devons faire face aux éléments d'entrée et de textarea. Notez que notre cas "TextArea": ​​L'instruction n'utilise pas la rupture, elle entrera donc dans le cas "Entrée": code.

Les cases à cocher et les boutons radio comparent leurs propriétés cochées et vérifiées par défaut, tandis que tous les autres types comparent leur valeur à DefaultValue:

var changed = [], n, c, def, o, ol, opt;

Si la valeur de C est vraie, l'élément a changé, nous l'avons donc ajouté au tableau modifié. La boucle est maintenant terminée:

for (var e = 0, el = form.elements.length; e < el; e++) {
    n = form.elements[e];
    c = false;

Nous avons juste besoin de renvoyer le tableau modifié et de terminer la fonction:

switch (n.nodeName.toLowerCase()) {

Exemple d'utilisation

Supposons que nous ayons créé le formulaire suivant:

    // select boxes
    case "select":
        def = 0;
        for (o = 0, ol = n.options.length; o < ol; o++) {
            opt = n.options[o];
            if (opt.selected) def = o;
        }
        c = (n.selectedIndex != def);
        break;

Nous pouvons vérifier si l'utilisateur a modifié des champs de formulaire en utilisant le code suivant:

        // input / textarea
        case "textarea":
        case "input":
            switch (n.type.toLowerCase()) {
                case "checkbox":
                case "radio":
                    // checkbox / radio
                    c = (n.checked != n.defaultChecked);
                    break;
                default:
                    // standard values
                    c = (n.value != n.defaultValue);
                    break;
            }
            break;
    }

ou, si aucune modification ne se produit, nous pouvons mettre à jour la valeur cachée "modifiée" en "non" lors de la soumission du formulaire. Cela permettra au code côté serveur de sauter la vérification du champ et la mise à jour de la base de données:

    if (c) changed.push(n);
}

(Remarque: la modification de "oui" en "non" sera élégamment dégradé car le serveur traitera toujours des données entrantes si JavaScript n'est pas disponible.)

J'espère que vous le trouverez utile.

(La partie FAQ est omise ici parce que la partie FAQ du texte d'origine n'a pas grand-chose à voir avec la fonction de code, qui est une explication supplémentaire de la fonction de code et est incompatible avec le but pseudo-original. Garder les FAQ augmentera le nombre de mots, mais il n'y a pas de gain pour le contenu de base de l'article.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!