Il existe plusieurs méthodes JavaScript qui peuvent être utilisées pour récupérer la valeur d'un champ de saisie de texte. Nous pouvons accéder ou définir la valeur d'un champ de saisie de texte dans un script en utilisant la méthode jQuery .val().
La tâche que nous allons effectuer dans cet article est de calculer les valeurs d'entrée HTML et de les afficher directement à l'aide de JQuery. Plongeons dans cet article pour mieux comprendre.
Pour récupérer la valeur des composants du formulaire tels que input, select et textarea, utilisez la fonction .val(). Lorsqu'il est appelé sur une collection vide, il renvoie undéfini.
Voici la syntaxe de la méthode .val()
$(selector).val()
Dans l'exemple ci-dessous, nous exécutons un script qui calcule les valeurs d'entrée HTML et les affiche directement sur la page Web.
<!DOCTYPE html>
<html>
<body style="text-align:center; background-color:#D5F5E3;">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="tutorial">
<form>
<div class="tutorial">
<label for="">ActualPrice</label>
<input type="text" id="price" required class="price form-control" />
</div>
<div class="tutorial">
<label for="">Discount</label>
<input type="text" id="discount" required class="discount form-control" />
</div>
<div class="tutorial">
<label for="">Amount</label>
<input type="text" id="amount" required class="amount form-control" readonly />
</div>
<button type="submit">Pay</button>
</form>
</div>
<script>
$('form input').on('keyup', function() {
$('#amount').val(parseInt($('#price').val() - $('#discount').val()));
});
</script>
</body>
</html>
Lorsque le script est exécuté, il génère une sortie composée de champs de saisie et de boutons cliqués sur la page Web. Lorsque l'utilisateur commence à saisir une valeur, il soustrait le prix et la remise et affiche le montant.
La traduction chinoise deConsidérez les exemples suivants dans lesquels nous exécutons un script pour afficher les valeurs d'entrée directement sur une page Web.
<!DOCTYPE html>
<html>
<body style="text-align:center; background-color:#E8DAEF;">
<style>
div {
color: #DE3163;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="name" id="tutorial">
<div></div>
<script>
$("#tutorial").keyup(function(event) {
text = $(this).val();
$("div").text(text);
});
</script>
</body>
</html>
Après avoir exécuté le script ci-dessus, la fenêtre de sortie apparaîtra affichant les champs de saisie sur la page Web. Lorsque l'utilisateur commence à remplir le champ de saisie, le texte sera affiché directement sur la page Web avec CSS appliqué.
La traduction chinoise deExécutez le script ci-dessous pour voir comment nous pouvons afficher le texte saisi directement sur la page Web.
<!DOCTYPE html>
<html>
<body style="background-color:#CCCCFF">
<input type="text" id="tutorial">
<button type="button" id="tutorial1">Click To Show Value</button>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function() {
$("#tutorial1").click(function() {
var result = $("#tutorial").val();
alert(result);
});
})
</script>
</body>
</html>
Lorsque le script est exécuté, il générera une sortie sur la page Web contenant les champs de saisie et les boutons cliqués. Lorsque l'utilisateur saisit du texte et clique sur le bouton, il affichera une alerte sur la page Web contenant le texte du champ de saisie.
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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
