Essayer de construire le formulaire suivant ave HTML5:
NB:la mise en forme n’est pas demandée !, par contre il faut utiliser les balises sémantiques,
1) Lorsque l’utilisateur change de produit votre script doit afficher le prix unitaire de l’article.
2) Lorsque l’utilisateur change de produit votre script doit afficher le prix unitaire de l’article.
Les articles disponibles sont:
- Pantalon : 50 dinars
- Veste : 80 dinars
- Cravate : 35 dinars
- Chemise : 45 dinars
3) Lorsque l’utilisateur clique sur le champ [quantité] cette mention doit disparaître pour permettre à l’utilisateur de taper la quantité achetée.
4) L’appui sur le bouton Calculer permet de calculer le Montant Total de la commande.
Code HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>commande produit</title>
</head>
<body>
<h1>commande produit</h1>
<fieldset>
<legend>commande</legend>
<form action="">
<p><label for="pdt">Produit</label> <select name="pdt" id="pdt" onchange="leprix()">
<option value="">choisir un article</option>
<option value="50">Pantalon</option>
<option value="80">Veste</option>
<option value="35">Cravate</option>
<option value="45">Chemise</option>
</select></p>
<p><label for="prix">Prix unitaire</label><input type="text" name="prix" id="prix"></p>
<p><label for="qte">quantite</label><input type="number" name="qte" id="qte" min="0" step="0.1" placeholder="quntitité positive" onfocus="effacer()"></p>
<p><label for="mnt">montant</label><input type="number" name="mnt" id="mnt" min="0" step="0.1"></p>
<input type="button" value="Calculer" onclick="calculer()">
</form>
</fieldset>
<script src="commandejs.js"></script>
</body>
</html>
Code JS
function leprix() {
var listeProduits = document.getElementById("pdt");
var prixUnitaire = document.getElementById("prix");
prixUnitaire.value = listeProduits.value;
}
function effacer() {
document.getElementById("qte").placeholder = "";
}
function calculer() {
var qte = document.getElementById("qte").value;
var prix = document.getElementById("prix").value;
var mnt = qte * prix;
document.getElementById("mnt").value = mnt;
}
