Formulaire calcul HTML/Javascript

Résolu

AZ8268 Messages postés 2 Date d'inscription lundi 18 mai 2020 Statut Membre Dernière intervention 19 mai 2020 - Modifié le 18 mai 2020 à 13:52
AZ8268 Messages postés 2 Date d'inscription lundi 18 mai 2020 Statut Membre Dernière intervention 19 mai 2020 - 19 mai 2020 à 08:26

Bonjour,

Je laisse ce message dans le forum car je désire créer un formulaire de calcul pour des radiateurs.
J'ai déjà rédigé du code, cependant cela ne donne rien...!
Pouvez-vous me donner des indications ?


<html> 
<head> 
<script language="JavaScript" type="text/javascript"> 
function puissance()
{ 
//saisie utilisateur 
var volume = document.getElementByName('volume').value; 

//variables
var zone = document.getElementsByName('zone').value; 
var isolation = document.getElementsByName('isolation').value;
var nord = document.getElementsByName('nord').value;
var habitation = document.getElementsByName('habitation').value;
var temperature = document.getElementsByName('temperature').value;
var altitude = document.getElementsByName('altitude').value;
var sdb = document.getElementsByName('sdb').value;


//Si le champ vide 
if(volume == '')
{ 
document.getElementById('puissance').innerHTML = 'Merci de saisir le volume de la pièce'; 
document.getElementById("volume").style.border = "1px solid red"; 
return false; 
} 

//On teste si la valeur est de type numérique 
else if (isNaN(volume)) 
{ 
document.getElementById('puissance').innerHTML = 'Merci de saisir un chiffre'; 
return false; 
} 

else
{
document.getElementById('puissance').innerHTML = (volume+zone+isolation+nord+habitation+temperature+altitude+sdb)/2580;
}
</script>
</head> 
<body> 
Volume :
<INPUT TYPE="text" NAME="volume" value="volume">
<FORM>
Zone géographique :
<SELECT name="zone" size="1">
<OPTION value="95">1
<OPTION value="85">2
<OPTION value="75">3
</SELECT>
</FORM>
<FORM>
Isolation :
<SELECT name="isolation" size="1">
<OPTION value="-20">Mauvaise
<OPTION value="0">Bonne
<OPTION value="+20">Très bonne
</SELECT>
</FORM>
<FORM>
<label for="nord">Pièce au Nord</label>
<input type="checkbox" id="nord" name="nord" value="10">
</FORM>
<FORM>
Type d'habitation :
<SELECT name="habitation" size="1">
<OPTION value="0">Maison
<OPTION value="-10">Appartement
</SELECT>
</FORM>
<FORM>
Température :
<SELECT name="temperature" size="1">
<OPTION value="-10">18°
<OPTION value="0">20°
<OPTION value="10">22°
</SELECT>
</FORM>
<FORM>
Altitude :
<SELECT name="altitude" size="1">
<OPTION value="0">0 à 500m
<OPTION value="10">500 à 1000m
<OPTION value="20">1000 à 1500m
</SELECT>
</FORM>
<FORM>
<label for="nord">Salle de bain</label>
<input type="checkbox" id="sdb" name="sdb" value="10">
</FORM>
<input type="button" value="Calul" onclick="javascript:puissance();">
<div id="puissance"></div> 
</body> 
</html>

A voir également:

Javascript formulaire calcul automatique
Whatsapp formulaire opposition - Guide
Réponse automatique thunderbird - Guide
Recherche automatique des chaînes ne fonctionne pas - Guide
Logiciel de sauvegarde automatique gratuit - Guide
Formulaire de réclamation facebook - Guide

2 réponses

Réponse 1 / 2

jordane45 Messages postés 38484 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 15 juillet 2025 4 751
18 mai 2020 à 15:27

Bonjour,

Une accolade manquante
La "fonction" getElementByName qui n'existe pas ..

en gros, le code corrigé donne ça

<html>
  <head>
    <title> test </title>
    <meta charset='utf-8'>
  </head>
  <body>
  
  Volume :
<INPUT TYPE="number" id="volume" value="" placeholder="volume">
<FORM>
  Zone géographique :
  <SELECT id="zone" size="1">
      <OPTION value="95">1
      <OPTION value="85">2
      <OPTION value="75">3
  </SELECT>
</FORM>
<FORM>
  Isolation :
  <SELECT id="isolation" size="1">
      <OPTION value="-20">Mauvaise
      <OPTION value="0">Bonne
      <OPTION value="+20">Très bonne
  </SELECT>
</FORM>
<FORM>
  <label for="nord">Pièce au Nord</label>
  <input type="checkbox" id="nord" id="nord" value="10">
</FORM>
<FORM>
  Type d'habitation :
  <SELECT id="habitation" size="1">
      <OPTION value="0">Maison
      <OPTION value="-10">Appartement
  </SELECT>
</FORM>
<FORM>
  Température :
  <SELECT id="temperature" size="1">
      <OPTION value="-10">18°
      <OPTION value="0">20°
      <OPTION value="10">22°
  </SELECT>
</FORM>
<FORM>
  Altitude :
  <SELECT id="altitude" size="1">
      <OPTION value="0">0 à 500m
      <OPTION value="10">500 à 1000m
      <OPTION value="20">1000 à 1500m
  </SELECT>
</FORM>
<FORM>
  <label for="nord">Salle de bain</label>
  <input type="checkbox" id="sdb" id="sdb" value="10">
</FORM>

<input type="button" value="Calul" onclick="javascript:puissance();">
<div id="puissance">
</div>

    <script type="text/javascript">
 
 
 function puissance(){
    //saisie utilisateur
    var volume = parseFloat(document.getElementById('volume').value);

    //variables
    var zone = parseFloat(document.getElementById('zone').value);
    var isolation = parseFloat(document.getElementById('isolation').value);
    var nord = parseFloat(document.getElementById('nord').value);
    var habitation = parseFloat(document.getElementById('habitation').value);
    var temperature = parseFloat(document.getElementById('temperature').value);
    var altitude = parseFloat(document.getElementById('altitude').value);
    var sdb = parseFloat(document.getElementById('sdb').value);

    //Si le champ vide
    if(volume == ''){
      document.getElementById('puissance').innerHTML = 'Merci de saisir le volume de la pièce';
      document.getElementById("volume").style.border = "1px solid red";
      return false;
    }//On teste si la valeur est de type numérique
    else if (isNaN(volume)){
      document.getElementById('puissance').innerHTML = 'Merci de saisir un chiffre';
      return false;
    }else{
       console.log("Valeurs",volume,zone,isolation,nord,habitation,temperature,altitude,sdb );
      document.getElementById('puissance').innerHTML = (volume+zone+isolation+nord+habitation+temperature+altitude+sdb)/2580;
    }
 
 }     
    </script>
  </body>
</html>

Discussions similaires

Formulaire et calcul automatique

Bonjour,
j'ai un formulaire

Il y a 6 champs

Le 4ième champ est une valeur fixe: (un chiffre)
Le 5ième champ est rempli par l'utilisateur.
Le 6ième champ est = au multiple du nombre se trouvant dans le 4ième champ et le 5ième.

Comment je peux faire pour que le champ 6 se calcule automatiquement et s'affiche directement une fois le champ 5 rempli par l'utilisateur sans que celui-ci ne doive appuyer sur quoi que ce soit?

De plus, le champ 5 doit être envoyé dans ma base de données et doit donc faire partie du formulaire également.

Merci de votre aide,
John4834

Calcul automatique pour formulaire HTML

Bonjour,

Voilà, j'aimerais mettre un formulaire (Bon de commandes) sur mon site. J'ai déjà créer le formulaire en soi sur base de se que j'ai lu sur des forums. Il y a 10 colonnes où l'on doit inscrire la référence, puis le prix. En dessous, le prix total est calculé automatiquement.

J'ai essayé 1 méthode proposé, mais apparemment je n'ai pas bien compris, car cela ne fonctionne pas. Je vous mets ci-dessous ce que j'ai obtenu. Pouvez-vous trouver l'erreur ?

Merci

--------------------------------

calcul

function calcul()

{
document.calcul.result.value=eval(...

Recupération de valeur d'un input HTML en JavaScript

Bonjour,

Je cherche a crée un champ de texte, ou, une fois les données entrées, lesdites données seront récupérées par une fonction JavaScript pour traitement.
Mon champ de texte HTML:

et ma fonction JavaScript:

function getHU() { var hu = document.getElementById("hu").innerHTML; alert(hu); }

Ici, la fonction: alert();, qui me sers juste a tester la valeur, n'affiche rien.

tester champ formulaire avec javascript

Bonjour,

j'ai un formulaire de participation dans un site , alors j'ai mis des champs obligatoire pour que l'utilisateur les remplis , donc mon problème est le suivant :

-------> lorsque je lui déclare qu'un champ est vide ou n'est pas correctement remplis , je veux qu'il revient au formulaire mes les champs correctes reste remplissent ,

Voila par la suite une portion de mon code de vérification avec java script :

[Javascript] récupération données formulaire

Bonjour,

J'aimerais savoir s'il est possible de récupérer des données envoyer par un formulaire en méthode post uniquement grâce au javascript, et si oui comment. J'en suis à plus d'une centaine de tuto/forum sur internet en français/anglais et je ne trouve pas de solution.
Pour vous représenter rapidement ce qu'il se passe:

A.html => envoie de formulaire.
B.html => réception du formulaire.

Vous noterez que mes pages sont en .html donc l'utilisation de php est proscrit.

Mes pages ne peuvent pas être en .php c'est une des contrainte dont je dispose du à un CMS et au faite que je doit intégrer mon système sur un site ex...

Vider les champs d'un formulaire

Bonjour,

S'il vous plait j'ai besoin d'un code php pour annuler le choix dans les listes déroulantes.
J'ai un formulaire où il y a 4 listes déroulantes qui sont alimentées à partir d'une base de données MySQL, et 4 champs textes, lorsque je choisi une donnée dans la liste déroulante tout les autres champs se remplissent par les données qui correspondent au choix effectué. Par exemple si je choisi ds une liste déroulante le nom d'un pays, il m'affiche la capitale, la superficie le nbre d'habitant... qui correspond à ce pays, jusqu'ici tout va bien.
Le problème, je veux qu'en cliquant sur annuler il vide tout les champs et réinitialise les listes déroulantes(c à d ...

Votre réponse

Discussions similaires