Formulaire déroulant interactif

Résolu/Fermé
valpsp Messages postés 23 Date d'inscription jeudi 10 novembre 2011 Statut Membre Dernière intervention 26 juin 2014 - 4 juin 2014 à 12:43
valpsp Messages postés 23 Date d'inscription jeudi 10 novembre 2011 Statut Membre Dernière intervention 26 juin 2014 - 4 juin 2014 à 16:19
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 !

A voir également:

1 réponse

valpsp Messages postés 23 Date d'inscription jeudi 10 novembre 2011 Statut Membre Dernière intervention 26 juin 2014
4 juin 2014 à 16:19
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>
0