Je crée un formulaire simple où l'utilisateur peut définir l'heure. Grâce à la validation javascript, il vérifie qu'il y a une valeur dans le formulaire. A l'origine, la variable globale "userInputHours" est fixée à 0.
Dans la fonction "validation()", lorsque l'utilisateur remplit les critères requis pour remplir le formulaire, la validation passe à "else" et doit mettre à jour la variable globale "userInputHours".
En dernier lieu, la boîte d'information HTML doit mettre à jour les heures de saisie de l'utilisateur.
Quel est le problème ? Je n'arrive pas à faire en sorte que la valeur de l'entrée du formulaire de l'utilisateur reste sur la boîte d'information HTML (elle est visible pendant moins d'une seconde, puis elle est écrasée par la valeur originale "userInputHours").
Je sais que certaines réponses indiquent que je devrais utiliser AJAX, mais c'est pour éviter que seules certaines parties de la page soient rechargées. L'utilisation d'AJAX ne résout pas la base de mon problème.
Scénarios et ce qui fonctionne/ne fonctionne pas :
Scénario 1 : Entrez les chiffres dans le champ "heures" du formulaire et appuyez sur le bouton "submit-1" :
Travaux : Le journal de la console affiche "Vous avez ajouté : [le numéro que vous avez ajouté dans le formulaire HTML].
Ne fonctionne pas : L'exécution d'un console.log(userInputHours) à partir de la console elle-même renvoie la valeur originale [0] et non la valeur ajoutée par l'utilisateur. Remarque ! Pendant un très court instant, moins d'une seconde, vous voyez la valeur de l'utilisateur dans le formulaire HTML, mais elle est écrasée par la valeur originale.
Résultats recherchés : Dans la boîte d'information HTML, le nombre d'utilisateurs ajoutés devrait apparaître.
Scénario 2 : En appuyant sur submit-2, on appelle la fonction "outsideValidation()", qui fixe la valeur de "userInputHours" à 5 :
Travaux : la variable globale "userInputHours" est mise à jour à l'intérieur de la fonction. La console.log(userInputHours) confirme que la variable globale a été mise à jour. La boîte d'information HTML est mise à jour avec la valeur de la variable globale mise à jour.
Ne fonctionne pas : Comme ce test n'est pas lié au champ "heures" du formulaire utilisateur, il est impossible d'ajouter un nombre dans le champ "heures" et de le mettre à jour dans la boîte d'information HTML.
Résultats escomptés : Fonctionne comme prévu. Ne résout pas la solution complète requise.
// Global variables.
var userInputHours = 0;
// Validation.
function validation() {
userInputHours = document.getElementById("userInputHours").value; // Works
/* Validates blank fields */
if (userInputHours == "") {
console.log("A field is left blank"); // Works
alert("Please fill in all fields!") // Works
return false;
}
else {
console.log("You added: " + userInputHours); // Works
// You see added value for a very short moment. The it returns to the original glbal value.
document.getElementById("info-box-text").innerHTML = userInputHours; // Does not work.
return true;
}
}
/* Not part of validation. Connected to button "submit-2" */
function outsideValidation() {
userInputHours = 5;
document.getElementById("info-box-text").innerHTML = userInputHours; // Works but is disconnected from HTML form user input.
}
/* Not part of function. Only run when saving the script. */
document.getElementById("info-box-text").innerHTML = userInputHours; // Works by save the script.
.box-1 {
background-color: white;
width: 100px;
height: 100px;
}
#userInputHours {
width: 100px;
}
#submit-1,
#submit-2 {
height: 60px;
}
<form onsubmit = "return validation();">
Hours:<br />
<input id="userInputHours" type="text" name="hours" value=""><br /><br />
<input id="submit-1" type="submit" value="Submit-1 (inside form)"><br /><br /> <!-- Submit button -->
</form>
<br />
<input id="submit-2" type="submit" value="Submit-2 (outside form)" onclick="outsideValidation()">
<br /><br />
<div id="info-box-title" class="info-box-title">Info-box - (you have set hours to):<br /></div>
<div id="info-box-text" class="info-box-text"></div>
