Problème surlignage et calcul

Fermé
sarah21091999 Messages postés 50 Date d'inscription jeudi 17 mai 2018 Statut Membre Dernière intervention 24 mai 2018 - 24 mai 2018 à 00:14
sarah21091999 Messages postés 50 Date d'inscription jeudi 17 mai 2018 Statut Membre Dernière intervention 24 mai 2018 - 24 mai 2018 à 12:50
Bonjour, j'aimerai savoir si quelqu'un saurait comment enlever cette longue bande jaune et ne surligner seulement que le -50% ?



Aussi j,'aimerai pouvoir faire un calcul je m'explique : je voudrai que lorsque je tape "JT" dans "code agent", s'affiche 10% du prix final dans la case "valeur commission"

<!DOCTOTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>FORMULAIRE</title>
<style>
h1{text-align:center;}
</style>
</head>
<body text="#29088A">
<form method="post" action="projet_voyage_formulaire.php">
<div style="text-align:center">
<p>
<img src="nevers.png" alt="photo nevers" width="500" height="650" hspace="16" align="left">
</p>
<font size="6">
<U><h1>FORMULAIRE</h1></U>
</font>
<font size="5">
<p align="center">
<label>Code Agent</label> :
<input type="text" name="agent" value="" />
</p>
<p align="center">
<label>Nom Client</label> :
<input type="text" name="nom" value="" require/>
<p align="center">
<label>Prénom Client</label> :
<input type="text" name="prenom" value="" />
</p>
<p align="center">
<label>Age Client</label> :
<input type=radio name="age12" id='agem12' onclick="verifAge(this.value);" value='-12'> -12 ans
<input type=radio name="age12" id='agep12' onclick="verifAge(this.value);" value='+12'> +12 ans
</p>
</font>
</p>
<br>
<span style="text-align:center" id="zone_prix" >
<font size ="5">
<label>Prix</label> :
<input type="text" name="prix" onkeyup="verifPrix(this);" id="prix" value='' > € <span style='background-color:#ffff66;' id='reduc' style='display:none' >-50%</span>
</br>
<br>
<label>Prix Final </label>
<input type="text" name="prixfinal" readonly id="prixfinal" value='' /> €
</span>
</font>
</br>

</form>
<p align="center">
<br>
<input type="submit" value="Inscription" style="height:35px; background-color:#29088A; color:white" >
</p>
<font size="5">
<p align="center">
<label>Valeur Commission</label> :
<input type="text" name="commission" id="vcommission" value="" />
</p>
</font>
</div>
<script type="text/javascript">
/**
// Affiche la zone réduc en fonction de l'age selectionné
  • / function verifAge(age){ var reduc = document.getElementById('reduc'); var prix = document.getElementById('prix'); reduc.style.display = age == '-12' ? 'block' : 'none'; verifPrix(prix); } /* // Fait le calcul du prix en fonction de l'age coché */ function verifPrix(elm){ var prix = elm; var prixval = elm.value; var agem12 = document.getElementById('agem12'); var agep12 = document.getElementById('agep12'); var prixfinal = document.getElementById('prixfinal'); var age = agem12.checked ? '-12' : (agep12.checked ? '+12' : ''); if(age == '-12'){ console.log('ancien prix : ' + prixval); var prixreduc = parseFloat(prixval) * 0.5; console.log('Nouveau prix : ' + prixreduc); prixfinal.value = prixreduc; }else if(age == '+12'){ prixfinal.value = prixval; }else{ //si aucune case n'est cochée... prixfinal.value = prixval; } } function calcul(){ var commission= document.getElementById("vcommission"); var prixfinal = document.getElementById("prixfinal").value; commission.value = prixfinal * 0.1;} </script> </body> </html>



j'espere que vous pourrais m'aider !
merci :)
A voir également:

1 réponse

Utilisateur anonyme
24 mai 2018 à 00:40
Bonjour

Si la bande jaune est si longue, c'est que tu appliques un display block à un élément qui en fait est inline.
Tu aurais dû mettre dans ta fonction verifAge :
reduc.style.display = age == '-12' ? 'inline' : 'none';
0
sarah21091999 Messages postés 50 Date d'inscription jeudi 17 mai 2018 Statut Membre Dernière intervention 24 mai 2018
24 mai 2018 à 12:02
ok je vais essayer merci !
0
sarah21091999 Messages postés 50 Date d'inscription jeudi 17 mai 2018 Statut Membre Dernière intervention 24 mai 2018
24 mai 2018 à 12:06
genial c'est super merci beaucoup !
0
Utilisateur anonyme
24 mai 2018 à 12:13
De rien.
Au fait, c'est
<!DOCTYPE html>,
pas
<!DOCTOTYPE html>
.
Et l'attribut text dans <body> n'est pas supporté en HTML5
Et je vois que l'url de ta page est en file://, ce qui n'est pas gênant telle qu'elle est actuellement, mais te posera de sérieux problèmes dès que tu y mettras vraiment du php.
Et certains champs de ton formulaire, en particulier le bouton submit, sont en dehors de la balise <form>
J'arrête là.
0
sarah21091999 Messages postés 50 Date d'inscription jeudi 17 mai 2018 Statut Membre Dernière intervention 24 mai 2018
24 mai 2018 à 12:50
qu'est ce qu'il faut que je mette alors dans body ?

et je ne sais pas comment changer l'url lol...

je vais faire attention aux champs et rectifier tout ca, merci !

et sinon j'ai fait ceci pour le calcul (tout en bas), je voudrai que lorsque je tape "JT" dans "code agent", s'affiche 10% du prix final dans la case "valeur commission". mon calcul fonctionne lorsque j'enleve "la restriction" mais pas quand je la met peut etre que je n'ai pas su la faire.. tu pourrais m'aider s'il te plait ?

      function verifPrix(elm){
var prix = elm;
var prixval = elm.value;
var agem12 = document.getElementById('agem12');
var agep12 = document.getElementById('agep12');
var prixfinal = document.getElementById('prixfinal');
var age = agem12.checked ? '-12' : (agep12.checked ? '+12' : '');
if(age == '-12'){
console.log('ancien prix : ' + prixval);
var prixreduc = parseFloat(prixval) * 0.5;
console.log('Nouveau prix : ' + prixreduc);
prixfinal.value = prixreduc;

}else if(age == '+12'){
prixfinal.value = prixval;
}else{
//si aucune case n'est cochée...
prixfinal.value = prixval;

}
}
function calcul(){
var code = elm;
var codeval = elm.value;
if(codeval == 'JT'){
vcommission.value = prixfinal.value * 0.10;
}else{
vcommission.value = 0;
}
}
</script>
</body>
</html>
0