Formulaire déroulant interactif
Résolu
valpsp
Messages postés
23
Date d'inscription
Statut
Membre
Dernière intervention
-
valpsp Messages postés 23 Date d'inscription Statut Membre Dernière intervention -
valpsp Messages postés 23 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
Je suis actuellement webmaster d'un site d'une petite entreprise, qui est construit très simplement en HTML + CSS.
Nous avons une partie location dans laquelle une image résume nos tarifs, cependant cela ne convient pas. En effet, lors de la création d'un devis de location, beaucoup de facteurs entrent en compte (nombre d'étages, km parcourus, durée de la location etc...) et donc le prix dépend presque exclusivement de ces facteurs.
Ma question est la suivante: comment faite pour créer des formulaires déroulants, qui lorsqu'on choisit telle ou telle option, modifient un prix directement sur la page ?
Voici un exemple grossier du type de formulaire que je souhaiterais créer : http://www.flipper-stern.fr/babyfootbonzinib60/index.html
Merci par avance chers amis !
Je suis actuellement webmaster d'un site d'une petite entreprise, qui est construit très simplement en HTML + CSS.
Nous avons une partie location dans laquelle une image résume nos tarifs, cependant cela ne convient pas. En effet, lors de la création d'un devis de location, beaucoup de facteurs entrent en compte (nombre d'étages, km parcourus, durée de la location etc...) et donc le prix dépend presque exclusivement de ces facteurs.
Ma question est la suivante: comment faite pour créer des formulaires déroulants, qui lorsqu'on choisit telle ou telle option, modifient un prix directement sur la page ?
Voici un exemple grossier du type de formulaire que je souhaiterais créer : http://www.flipper-stern.fr/babyfootbonzinib60/index.html
Merci par avance chers amis !
A voir également:
- Formulaire déroulant interactif
- Whatsapp formulaire opposition - Guide
- Menu déroulant excel - Guide
- Formulaire de réclamation facebook - Guide
- Formulaire de reclamation instagram - Guide
- Sommaire interactif word - Guide
1 réponse
Il fallait en fait utiliser du javascript, je l'ai résolu par moi-même sans connaitre un traitre mot de ce langage (oui je suis assez fier ^^)
Voici mon code, en espérant que ça serve pour quelqu'un d'autre:
La logique est simple à comprendre, même quand on n'y connait rien en javascript, faut juste faire attention dans la formule qui détermine le résultat car les additions et soustractions nécessitent d'encadrer la valeur dans parseInt(valeur).
<HTML>
<HEAD>
<meta charset="utf-8"/>
</HEAD>
<BODY>
<script>
function cal() {
var nb=document.form1.places.value;
var tf=document.form1.tarifs.value;
var et=document.form1.etages.value;
var di=document.form1.distance.value;
var resultat=nb*tf+parseInt(et)+parseInt(di);
document.form1.tresultat.value=resultat;
}
</script>
<form name="form1">
Nombre de baby :
<select name="places" onChange="cal()">
<option value="1">1
<option value="2">2
<option value="3">3
<option value="4">4
</select>
Modèle :
<select name="tarifs" onChange="cal()">
<option value="1000">Bonzini
<option value="2000">Sulpie
</select>
Etages :
<select name="etages" onChange="cal()">
<option value="0">0
<option value="40">1
<option value="80">2
<option value="120">3
<option value="160">4
</select>
Distance :
<select name="distance" onChange="cal()">
<option value="0">0
<option value="1">1
<option value="2">2
<option value="3">3
<option value="4">4
</select>
<br><br>
Résultat<input type="text" value="0" name="tresultat">
</form>
</BODY>
</HTML>
Voici mon code, en espérant que ça serve pour quelqu'un d'autre:
La logique est simple à comprendre, même quand on n'y connait rien en javascript, faut juste faire attention dans la formule qui détermine le résultat car les additions et soustractions nécessitent d'encadrer la valeur dans parseInt(valeur).
<HTML>
<HEAD>
<meta charset="utf-8"/>
</HEAD>
<BODY>
<script>
function cal() {
var nb=document.form1.places.value;
var tf=document.form1.tarifs.value;
var et=document.form1.etages.value;
var di=document.form1.distance.value;
var resultat=nb*tf+parseInt(et)+parseInt(di);
document.form1.tresultat.value=resultat;
}
</script>
<form name="form1">
Nombre de baby :
<select name="places" onChange="cal()">
<option value="1">1
<option value="2">2
<option value="3">3
<option value="4">4
</select>
Modèle :
<select name="tarifs" onChange="cal()">
<option value="1000">Bonzini
<option value="2000">Sulpie
</select>
Etages :
<select name="etages" onChange="cal()">
<option value="0">0
<option value="40">1
<option value="80">2
<option value="120">3
<option value="160">4
</select>
Distance :
<select name="distance" onChange="cal()">
<option value="0">0
<option value="1">1
<option value="2">2
<option value="3">3
<option value="4">4
</select>
<br><br>
Résultat<input type="text" value="0" name="tresultat">
</form>
</BODY>
</HTML>
