Javascript Girl
  1. Javascript Girl
  3. Mise à jour en temps réel des valeurs sur un formulaire
Intereting Posts
Quels outils utilisez-vous pour déboguer HTML / JS dans votre navigateur? Jquery Focus sur le champ de saisie Existe-t-il un code source ouvert pour créer un texte et des icônes «lien d'aperçu», comme sur facebook? Enregistrer la base 64 comme PDF au côté client avec JavaScript La sous-vue n'est pas rendue Comment puis-je obtenir la valeur après hash (#) à partir d'une URL en utilisant jquery Couper et coller les valeurs de chaîne à la prochaine entrée après le caractère de l'onglet en utilisant JavaScript / jQuery Variable non accessible lorsqu'elle est initialisée en dehors de la fonction Comment créer une charge de bande avec un jeton de paiement envoyé par AJAX à php ReactJS – multilare textarea Formatez une cellule Google Sheets en texte clair via Script d'applications Référence d'un objet Javascript imbriqué dynamiquement L'événement de JQuery Click n'est pas déclenché dans Safari? Définir sliderInput valeurs en caractères brillants Confirmation avant de laisser le formulaire html modifié

Mise à jour en temps réel des valeurs sur un formulaire

Un peu lié à ma autre question (qui a été répondu) ici , je me demandais si ce qui suit était possible (il est probable et très basique, mais je suis un peu noblesse à JavaScript)!

J'ai donc 2 champs de saisie où l'utilisateur tape quelque chose dans un formulaire. Ils appuient sur "calculer", puis la fonction totalise ce qu'ils ont entré et calculent respectivement 1,2 et 3% pour chaque valeur. Cela ressemble à ceci:

input 1%value
input 2%value
input 3%value
total total

Y at-il un moyen pour moi de pouvoir mettre à jour le formulaire en temps réel? Alors, je veux dire, dès que l'utilisateur saisit une valeur dans un champ, la fonction commence automatiquement à mettre à jour les valeurs telles que le total, etc.? Comment parviendrais-je à réaliser cela, cela peut-il être fait uniquement en JavaScript?

Merci

Kiz

Si vous souhaitez afficher les valeurs «en temps réel» (de manière significative, en tant que utilisateur), vous pouvez utiliser les valeurs de la saisie:

Cordialement,

Max

Placez un gestionnaire d'événements sur l'événement onBlur . Si vous aviez une fonction Javascript appelée calculateStuff() , votre élément d'entrée pourrait le référencer comme ceci: 

 <input name="something" type="text" onblur="calculateStuff();" value="">

L'événement onBlur se produit lorsque l'utilisateur quitte le champ. Si vous voulez que cela se produise alors qu'ils tapent encore, vous pouvez utiliser le gestionnaire onChange de la même manière.

Oui. Vous devez appeler un événement onkeyup / onchange en JavaScript pour déterminer si l'utilisateur a tapé quelque chose et à l'intérieur de l'événement, il suffit d'appeler une fonction JavaScript qui actualise le formulaire en effectuant les calculs et en insérant les valeurs.

Vous pouvez également ajouter d'autres auditeurs d'événements tels que le flou etc.

Cela fait longtemps que je ne peux publier aucun code utilisable, mais Google est votre ami ici.

Sans trouver une réponse complète pour vous, voici quelques conseils:

Le javascript pur nécessiterait quelque chose comme ceci en utilisant la .value partir d'un élément: 

 alert(document.getElementById('elementid').value);

Si vous utilisez une bibliothèque javascript comme par exemple jquery, vous pouvez utiliser quelque chose comme .val ()

Edit: vous pouvez utiliser l'événement onchange pour traiter les modifications

C'est simple! Au lieu d'utiliser le bouton, ajoutez un onChange="your_calculate_function()" à chacune de vos entrées.