Bonjour,

J'aurai besoin de vos connaissances afin de dynamiser un formulaire qui a pour but de résoudre de simple équation et en afficher instantanément le résultat dans la case "Prix" une fois que les valeurs $largeur et $hauteur et autres options auront été inscrites.

Autre difficulté, ce code doit s'intégrer dans un formulaire déjà existant. Il ne doit pas valider (submit) le formulaire déjà existant au risque de soumettre un formulaire incomplet.

Le JAVASCRIPT serait selon moi la solution.

Voici à quoi cela devrait ressembler. Reste plus qu'à apporter quelques rajouts ou quelques modifs afin que cela fonctionne.

<?php
function solution($largeur, $hauteur, $opt, $unit)
{
if ($unit = '1') {
$unit = 'cm';
$l = $largeur;
$h = $hauteur;
}

if ($unit = '6.45') {
$unit = 'in';
$l = $largeur * 6.45;
$h = $hauteur * 6.45;
}

$s = $l * $h;
$p = ( $l + $h ) * 2;
$a = 0.0125;
$b = 20;
$c = 0.032;
$d = 1.123;

if ($opt == 'no') $o = 0;
if ($opt == 'yes') $o = $p * $c + $d;
$prix = ( $s * $a + $b ) +  $o;

   return array($prix, $unit);
}

function allreset() {
$hauteur = '';
$largeur = '';
$prix = '';
return array($hauteur, $largeur, $prix);
}

if (!isset($hauteur)) $hauteur='';
if (!isset($largeur)) $largeur='';
if (!isset($unit)) $unit='cm';
if (!isset($opt)) $chassis='no';
?>

  <table border=0 align="center" cellpadding="0" cellspacing=0>
<tr>
  <td colspan="2"><span class="select2">
    <select name="unit">
      <option id="unit" value="1"  <?php if (isset($unit) and $unit == 'cm') print 'selected';?>>Centimeters</option>
      <option id="unit" value="6.45" <?php if (isset($unit) and $unit == 'in') print 'selected';?>>Inches</option>
    </select>
  </span></td>
  </tr>
<tr>
  <td>largeur : 
    <input name="largeur" type="text" id="largeur" value="<?php if (isset($larg)) {print $larg;} else {print '';}?>" size=5>
    <?php print $unit;?> x hauteur :
    <input name="hauteur" type="text" id="hauteur" value="<?php if (isset($haut)) {print $haut;} else {print '';}?>" size=5>
    <?php print $unit;?></td>
  </tr>
<tr>
  <td colspan="2" align="center"><label>
    <input type="radio" name="ratio" id="ratio" value="yes">
    avec option
    <input name="ratio" type="radio" id="ratio" value="no" checked>
    sans option</label></td>
</tr>
<tr bgcolor="#CCCCCC">
  <td colspan="2" align="right"> Prix =
    <input id="prix" name="c" type="text" value="<?php if (isset($prix)) {print $prix;} else {print '';}?>" size=5>
    euro</td>
  </tr>
<tr>
  <td colspan="2" align="center"><input name="reset" type="reset" onClick="allreset()"></td>
</tr>
</table>

N'hésitez pas d'abuser de commentaire afin que je puisse bien comprendre le code.
Merci à tous ceux ou celles qui m'apporteront leur contribution.

Salut,

Je suis tiraillé entre deux possibilitée :

• Soit je t'aide, mais comme tu n'as pas l'air d'y connaître grand chose (sans offense) je vais au final te donner un code tout fait. Le problème c'est que c'est contraire au principe du forum.
• Soit je te conseil d'aller voir le tuto JS. Je ne t'aurais pas vraiment aider sur le court terme mais ça peu payer sur la durée.

C'est à toi de voir mais je pense que la seconde solution est la meilleure (je suis passé par là moi aussi).

Y'a pas vraiment à réfléchir en fait, je sais pas trop comment ça marche sur les autres rubriques du forum du SdZ (et je m'en fiche un peu en fait), mais dans la rubrique Javascript on ne fourni pas de code tout prêt.

Alors bien sûr, SebastieZ, tu as toujours la possibilité d'aller voir sur un autre forum où on te fournira sûrement un code tout prêt, mais tu y auras perdu une formidable occasion d'apprendre un nouveau langage et de te faire aider par une communauté plutôt active. Sache que si tu as un problème en JS, on t'aidera sans problème pour peu que tu aies fait des recherches et commencé à coder ton script .

J'ai bien compris la raison qu'y vous pousse à ne pas donner de code tout prêt. Je suis pour ma part toujours intéresser sur le comment un script fonctionne. Je me lance donc sur le topic et je posterai prochainement un nouveau code avec les modifications que j'aurai appris.

En attendant, quel conseil pourriez-vous me donner ? Une piste ? Un indice ? N'importe quoi qui pourrait me permettre de progresser et de me mettre dans la bonne voie pour réussir à faire fonctionner le code.

D'avance merci ;-)

Le principe de bas est de déclencher des événements Js lors d'actions sur une balise HTML.
Ces événements vont eux appelé des fonctions qui opéreront diverses actions sur ta page.

Dans ton exemple, tu veux qu'a chaque fois qu'on entre un chiffre (balise = input, événement = onchange) ça fasse un petit calcul.

Ce qui donne un squelette de code dans ce genre :

<input type="text" onchange="maFonction()"/>

function maFonction(){
  // récupéré les valeurs nécessaires
  // faire le calcul
  // afficher le résultat
}

Alors après avoir lu et compris (+ou-) le topic, j'en suis arrivé au résultat ci-dessous mais évidement le script ne marche pas. Je n'arrive pas à recevoir la valeur de la variable prix qui doit être normalement retournée par la fonction solution().

<script type="text/javascript">
function solution(largeur, hauteur, opt, cmin)
{
if (cmin == 'cm') {
var l = largeur;
var h = hauteur;
}

if (cmin == 'in') {
var l = (largeur*2.54);
var h = (hauteur*2.54);
}

var s = (l*h);
var p = ((l+h)*2);
var a = 0.0125;
var b = 20;
var c = 0.032;
var d = 1.123;

if (opt == 'yes') { var o = ((p*c)+d); } else { var o = 0; }
var prix = (((s*a)+b)+o));

   return prix;
}

//if (!largeur) { var largeur='';}
//if (!hauteur) { var hauteur='';}
//if (!cmin) { var cmin='cm';}
//if (!opt)  { var opt='no';}

if ( typeof largeur == 'undefined') { var largeur=''; }
if ( typeof hauteur == 'undefined') { var hauteur=''; }
if ( typeof cmin == 'undefined') { var cmin='cm'; }
if ( typeof opt == 'undefined') { var opt='no'; }

</script>

<table border=0 align="center" cellpadding="0" cellspacing=3>
<tr>
  <td colspan="6">
    <select name="cmin" id="cmin" onchange="document.getElementById('incm').innerHTML=value,document.getElementById('cmin').cmin=value">   
      <option value="cm" selected>Centimeters</option>
      <option value="in" >Inches</option>
    </select>
  </td>
</tr>
<tr>
  <td>largeur </td><td>
    <input name="largeur" type="text" id="largeur" value="" size=1 maxlength="3" onchange="document.getElementById('largeur').largeur=value,document.getElementById('largeur').value=largeur">
    </td><td>x hauteur </td><td>
    <input name="hauteur" type="text" id="hauteur" value="" size=1 maxlength="3" onchange="document.getElementById('hauteur').hauteur=value,document.getElementById('hauteur').value=hauteur" onblur="document.getElementById('prix').value=solution(largeur, hauteur, opt, cmin)">
    </td><td id="incm">cm</td><td id="incm">&nbsp;&nbsp;&nbsp;
    <label>
      <input name="opt" type="checkbox" id="opt" onchange="document.getElementById('opt').checked.opt=value" value="yes">
    </label>+ option</td>
</tr>
<tr bgcolor="#CCCCCC">
  <td colspan="6" align="right"> Prix =
    <input name="prix" type="text" id="prix" value="" size=1 >
    euro</td>
</tr>
<tr>
  <td colspan="6" align="center"><input name="reset" type="reset" onClick="document.getElementById('largeur').value='',document.getElementById('hauteur').value=''"></td>
</tr>
</table>

Pourriez-vous me souligner mes erreurs ?
(oui je me doute qu'elles doivent être nombreuses )

ps: désoler pour le code un peu désordre

Bon déjà tu es sur la voie.

Premier conseil : met que un minimum de JS dans le code HTML. Cela nuis à la lisibilité et permet de laisser passer des erreurs. Le mieux étant de juste mettre un appel vers la fonction (encore mieux c'est aucun code JS dans l'HTML mais c'est une autre paire de manche )

Après ton problème est au niveau des variables. Quand tu fais document.getElementById('largeur').largeur=value ça ne veux rien dire pour le langage. Tu essai de modifier l'attribut largeur (mais il n'existe pas) de l'élément.
Je pense que tu devrais récupéré les valeurs dont tu as besoin au début de ta fonction solution.

Est-ce que tu pourrais, au passage, nous expliquer ce que tu cherches à faire avec ces lignes :

if ( typeof largeur == 'undefined') { var largeur=''; }
if ( typeof hauteur == 'undefined') { var hauteur=''; }
if ( typeof cmin == 'undefined') { var cmin='cm'; }
if ( typeof opt == 'undefined') { var opt='no'; }

Là comme ça, je ne vois pas à quoi elles servent. Mais j'imagine qu'il doit y avoir une logique derrière ça.

C'est pas comme ça que tu initialises tes variables ??

Si c'est à moi que tu poses la question, non, ce n'est pas comme ça que je fais. Et de toutes façons, les variables seront obligatoirement undefined au chargement de la page. Donc pourquoi faire ces tests ?
C'est pour ça que je demande qu'il nous explique sa logique. Y'a ptet un truc que je n'ai pas compris ou dont je n'ai pas connaissance dans son script

Alors pour répondre au sujet des lignes "if ( typeof..." je voulais m'assurer que les variables n'existent pas avant de les initialisés avec des valeurs. N'etant pas certain sur le comment le javascript fonctionne (1ère que je code du js), j'ai donc pris cette précaution au cas ou.

Pour la ligne "document.getElementById('largeur').largeur=value" en faite la variable 'largeur' existe bien puisque comme je l'ai expliqué ci-dessous, je l'ai déjà initialisé au cas ou elle n'existerai pas. Mais bon comme je débute, je peux me tromper.

Dans ma logique, je cherche à m'assurer que chaque variables envoyées à la fonction "solution()" ont bien été préalablement incrémentées par les choix effectués par l'utilisateur lors de la saisie du formulaire. Mais malgrés cela, la fonction ne me renvoi pas la variable "prix"



Bon, j'ai finalement reussi le faire fonctionner.

Voici le code :

<script type="text/javascript">
function solution(largeur, hauteur, opt, cmin)
{

if (!largeur) { alert('Veuillez entrer une largeur !!!'); return '';}
if (!hauteur) { alert('Veuillez entrer une hauteur !!!'); return '';}

if (cmin == 'cm') {
var l = largeur;
var h = hauteur;
}

if (cmin == 'in') {
var l = (largeur*2.54);
var h = (hauteur*2.54);
}

var s = (l*h);
var p = ((parseInt(l)+parseInt(h))*2);
var a = 0.0125;
var b = 20;
var c = 0.031981982;
var d = 1.122522523;

if (opt == 'yes') { var o = ((p*c)+d); } else { var o = 0; }
var prix = (((s*a)+b)+o);

   return l;
}

if ( !largeur ) { var largeur=''; }
if ( !hauteur ) { var hauteur=''; }
if ( !cmin ) { var cmin='cm'; }
if ( !opt ) { var opt='no'; }
if ( !prix ) { var prix=''; }

</script>

<table border=0 align="center" cellpadding="0" cellspacing=3>
<tr>
  <td colspan="6" id="xxx">
    <select name="cmin" id="cmin" onchange="cmin=document.getElementById('cmin').value,document.getElementById('incm').innerHTML=cmin">   
      <option value="cm" selected>Centimeters</option>
      <option value="in" >Inches</option>
    </select></td>
</tr>
<tr>
  <td>largeur </td><td>
    <input name="largeur" type="text" id="largeur" value="" size=1 maxlength="4" onchange="largeur=document.getElementById('largeur').value">
    </td><td>x hauteur </td><td>
    <input name="hauteur" type="text" id="hauteur" value="" size=1 maxlength="4" onchange="hauteur=document.getElementById('hauteur').value">
    </td><td id="incm">cm</td><td id="incm">

        <label>
          <input name="opt" type="radio" value="no" id="optno" onchange="opt=document.getElementById('optno').value" checked>
          sans option</label>
        <br>
        <label>
        <input name="opt" type="radio" value="yes" id="optyes" onchange="opt=document.getElementById('optyes').value">
          avec option</label>
          <div id="optt"></div>
      </td>
</tr>

<tr bgcolor="#CCCCCC">
  <td colspan="6" align="right"> Prix 
    <input name="=" type="button" value="=" onClick="document.getElementById('prix').value=prix=solution(largeur, hauteur, opt, cmin)">
    <input name="prix" type="text" id="prix" value="" size=5>
    euro</td>
</tr>
<tr>
  <td colspan="6" align="center"><input name="reset" type="button" onClick="document.getElementById('largeur').value=largeur='',document.getElementById('hauteur').value=hauteur='',document.getElementById('prix').value=prix=''" value="reset"></td>
</tr>
</table>

Comme vous pouvez le voir c'est beaucoup plus épuré que la dernière fois.
Il me reste encore à apporter quelques modif comme accepter que des valeurs numérique pour 'largeur' et 'hauteur' et remplacer les ',' par '.'

Je maintient le topic ouvert encore quelques instant afin de lire vos observations et vos recommendations.

Merci pour m'avoir guider vers le droit chemin du JS