Discussion :

[jman94]

bonjour,

j'ai un problème avec mon code javascript, je suis débutant...

je veux additionner les valeurs saisies dans les 2 premiers champs et afficher le résultat dans le 3ème champ.

le premier problème c'est que dés que je passe par une fonction ça ne fonctionne pas...j'utilise pourtant la bonne synthaxe.

j'ai donc essayé d'écrire directement la fonction dans le OnKeyUp, ça marche pour un de mes formulaires ^^

mais pour celui là par exemple, ça ne fonctionne pas .... ça reste blanc ou au pire ça me marque [object HTMLInputElement] dans le champ résultat ...et je ne vois pas d'où vient le problème :s

voici le code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<form action="#" method="post" id="Form" name="Form">	
<p><label title="Veuillez saisir la distance parcourue" for="dist">distance :</label>
<input type="text" size='6' maxlength='6' title="Veuillez saisir la distance parcourue" id="dist" name="dist" value="<?php if(isset($_POST['dist'])) {echo $_POST['dist'];}?>" OnKeyUp="dist=parseInt(document.getElementById('dist')); dist2=parseInt(document.getElementById('dist2')); document.getElementById('TotalKm')=dist+dist2;" /> km
</p>
<p><label title="Veuillez saisir la distance parcourue" for="dist2">distance 2 :</label>
<input type="text" size='6' maxlength='6' title="Veuillez saisir la distance parcourue" id="dist2" name="dist2" value="<?php if(isset($_POST['dist2'])) {echo $_POST['dist2'];}?>" OnKeyUp="dist=parseInt(document.getElementById('dist2')); dist2=parseInt(document.getElementById('dist2')); document.getElementById('TotalKm')=dist+dist2;" /> km
<br/>
</p>
<p>Total km:
<input type="text" size='20' maxlength='6' title="Total Km D&eacute;placement" id="TotalKm" name="TotalKm" readonly />
</p>
</form>

merci de votre aide

[dukej]

document.getElementById('dist2').value

il te manque le .value un peu partout

Mais si tu mettais ton code dans une fonction (ça ne tueras personne) tu verras beaucoup plus clair

http://jsfiddle.net/QLdpg/

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
<form action="#" method="post" id="Form" name="Form">    
<p><label title="Veuillez saisir la distance parcourue" for="dist">distance :</label>
<input type="text" size='6' maxlength='6' title="Veuillez saisir la distance parcourue" id="dist" name="dist" value="2" onkeyup="updateResult()" /> km
</p>
<p><label title="Veuillez saisir la distance parcourue" for="dist2">distance 2 :</label>
<input type="text" size='6' maxlength='6' title="Veuillez saisir la distance parcourue" id="dist2" name="dist2" value="5" onkeyup="updateResult()" /> km
<br/>
</p>
<p>Total km:
<input type="text" size='20' maxlength='6' title="Total Km D&eacute;placement" id="totalKm" name="TotalKm" readonly />
</p>
</form>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
function updateResult() {
    var dist=parseInt(document.getElementById('dist').value); 
    var dist2=parseInt(document.getElementById('dist2').value);
    document.getElementById('totalKm').value=dist+dist2;}

[jman94]

merci j'avais déjà essayer cette solution, mais le résultat est le même, aucune valeur dans le 3ème champ, pourtant effectivement ça fonctionne dans jsfiddle :s

[E.Bzz]

Bonjour,

j'avais déjà essayer cette solution, mais le résultat est le même

il ne s'agit pas d' "une autre solution" mais de la seule manière de faire dans ton cas.

Fais la correction, re-teste et si ça ne fonctionne toujours pas, montre-nous ton code corrigé.
Rien ne dit que ça soit la seule erreur

A+

[dukej]

merci j'avais déjà essayer cette solution, mais le résultat est le même, aucune valeur dans le 3ème champ, pourtant effectivement ça fonctionne dans jsfiddle :s

Tips : tu vois le lien avant le code c'est un lien vers jsfiddle.net avec le code que je t'ai mis, et bizarrement ça marche parfaitement

[jman94]

merci tout le monde, alors en fait j'ai trouvé l'erreur, une fonction javascript que j'avais déjà mise, empêchait apparemment la bonne execution de mon script de calcul...sans pour autant comprendre l'erreur ^^ j'aimerais donc un petit éclaircissement

en fait j'ai inséré un script pour pouvoir annuler les valeurs de tous les champs du formulaires, pour éviter de les effacer un par un en cas d'erreur...

j'avais trouvé ce script sur internet :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
 
function effacer(formulaire){
 
for (var i=0; i<formulaire.length; i++){if (formulaire.elements[i].type=="radio" || formulaire.elements[i].type=="checkbox") {formulaire.elements[i].checked=false;}
		else if (formulaire.elements[i].type=="select-one") {formulaire.elements[i].options[0].selected=true;}
		else if (!(formulaire.elements[i].type=='reset' || formulaire.elements[i].type=='submit' || formulaire.elements[i].type=='button')) {formulaire.elements[i].value="";}
		}

que j'ai donc appelé de cette façon à la fin de mon formulaire :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<p>
<input type="reset" id="annuler" name="annuler" value="Annuler"  onclick="effacer(this.form); return false;" />
<input type="submit" name="envoyer" value="Valider les modifications"  />
</p>

ce script de réinitialisation automatique des champs fonctionnent parfaitement par ailleurs, et me semblait logique et compréhensible en le trouvant ^^ ...sauf qu'il semble causer du soucis....

pourriez vous m'expliquer pourquoi ?

je précise qu'en le mettant en type submit et non reset cela fonctionne ... mais heu pourquoi ce reset pose problème en sachant que je n'ai jamais cliqué sur ce bouton avant d'essayer mon autre script :s ?

merci

[E.Bzz]

Je ne sais pas pourquoi ça plantait, mais ce bouton est une sorte de pléonasme en soi
Un peu comme si tu faisais un

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<input type="submit" onclick="this.form.submit();">

Tu as essayé avec

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<input type="reset" id="annuler" name="annuler" value="Annuler">

?

A+