récupération donnée formulaire

Version imprimable

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:

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éplacement" id="TotalKm" name="TotalKm" readonly /> </p> </form>
merci de votre aide ;)

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:

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:

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;}

26/05/2010, 13h32
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
26/05/2010, 13h54
E.Bzz

Bonjour,

Citation:

Envoyé par jman94

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+
26/05/2010, 14h21
dukej

Citation:

Envoyé par 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

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

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:

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:

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 :)

27/05/2010, 10h09
E.Bzz

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

Code:

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

:fleche: Tu as essayé avec

Code:

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

?

A+