|
|
|
Addition de champs dans un formulaire
| ||||||||
Petite astucienne | Bonjour,
J'ai créé un site Internet dans lequel j'ai fait un formulaire. Je suis à la recherche d'un bloc de code soit en Javascript ou autre qui me permettrait d'additionner 6 champs monétaires et que dès qu'un montant est inscrit dans l'une des cases, ce montant s'afficherait dans la case total. Si le visiteur enlève un montant, la correction de ferait automatiquement dans la case total. Suis-je trop exigeante?[smile]
Je joins l'adresse du site pour avoir une meilleure idée de ce que je demande.
www.cybernaute.com/francyne.deschenes/BouclesBows/boucles1-2Fr.htm
Merci et à bientôt, Francyne
| |||||||
Publicité | ||||||||
Petit astucien | Salut Francyne,
Tu remplaces ton formulaire par (les modifications que j'ai apportées sont en rouge)
<form action="mailto:fd@cybernaute.com?subject=Commande de boucles" method=post ENCTYPE="text/plain" name="formulaire">
<CENTER>
<TABLE border=3 width="100%" bgcolor=#E4E7F4>
<TBODY>
<TR>
<TD><FONT face="Times New Roman, Times, serif" color=#000000 size=+0>Boucles 1/2" - 1,30cm:</FONT></TD>
<TD><INPUT type="hidden" maxLength=40 name=FRANÇAIS: Boucles 1/2po Quantité: size="10" value=" "></TD>
</TR>
<TR>
<TD><FONT face="Times New Roman, Times, serif" color=#000000 size=+0>Numéro de la boucle:</FONT></TD>
<TD>
<INPUT type="text" maxLength=40 name=Numero01 size="5" value=" ">
<INPUT type="text" maxLength=40 name=Numero02 size="5" value=" ">
<INPUT type="text" maxLength=40 name=Numero03 size="5" value=" ">
<INPUT type="text" maxLength=40 name=Numero04 size="5" value=" ">
<INPUT type="text" maxLength=40 name=Numero05 size="5" value=" ">
<INPUT type="text" maxLength=40 name=Numero06 size="5" value=" ">
</TD>
</TR>
<TR>
<TD><FONT face="Times New Roman, Times, serif" color=#000000 size=+0>Prix/l'unité: <font size=2>(Ne pas taper les zéros)</FONT></TD>
<TD>
<INPUT type="text" maxLength=40 name=Prix01 size="5" onBlur="parseelement(this)" value=" " onChange="addition()">
<INPUT type="text" maxLength=40 name=Prix02 size="5" onBlur="parseelement(this)" value=" " onChange="addition()">
<INPUT type="text" maxLength=40 name=Prix03 size="5" onBlur="parseelement(this)" value=" " onChange="addition()">
<INPUT type="text" maxLength=40 name=Prix04 size="5" onBlur="parseelement(this)" value=" " onChange="addition()">
<INPUT type="text" maxLength=40 name=Prix05 size="5" onBlur="parseelement(this)" value=" " onChange="addition()">
<INPUT type="text" maxLength=40 name=Prix06 size="5" onBlur="parseelement(this)" value=" " onChange="addition()">
</TD>
</TR>
<TR>
<TD><FONT face="Times New Roman, Times, serif" color=#000000 size=+0>Total: <font size=2>(Taper le montant sans les zéros)</font></FONT></TD>
<TD><INPUT type="text" maxLength=40 name=Total size="10" onBlur="parseelement(this)" value=" "></TD>
</TR>
<TR>
<TD> </TD>
<TD> </TD>
</TR>
<TR>
<TD colspan=2 align=center><FONT face="Times New Roman, Times, serif" color=#000000 size=4><B>Pour faire suivre votre commande,<br>vous devez remplir toutes les cases suivantes</B></TD>
</TR>
<TR>
<TD><FONT face="Times New Roman, Times, serif" color=#000000 size=+0>Votre nom:</FONT></TD>
<TD><INPUT type="text" maxLength=40 name=Votre-nom size="50" value=" "></TD>
</TR>
<TR>
<TD><FONT face="Times New Roman, Times, serif" color=#000000 size=+0>Votre prénom:</FONT></TD>
<TD><INPUT type="text" maxLength=40 name=Votre-prénom size="50" value=" "></TD>
</TR>
<TR>
<TD><FONT face="Times New Roman, Times, serif" color=#000000 size=+0>Votre adresse:</FONT></TD>
<TD><INPUT type="text" maxLength=40 name=Votre-adresse size="50" value=" "></TD>
</TR>
<TR>
<TD><FONT face="Times New Roman, Times, serif" color=#000000 size=+0>Ville:</FONT></TD>
<TD><INPUT type="text" maxLength=40 name=Ville size="50" value=" "></TD>
</TR>
<TR>
<TD><FONT face="Times New Roman, Times, serif" color=#000000 size=+0>Province:</FONT></TD>
<TD><INPUT type="text" maxLength=40 name=Province size="50" value=" "></TD>
</TR>
<TR>
<TD><FONT face="Times New Roman, Times, serif" color=#000000 size=+0>Pays:</FONT></TD>
<TD><INPUT type="text" maxLength=40 name=Pays size="50" value=" "></TD>
</TR>
<TR>
<TD><FONT face="Times New Roman, Times, serif" color=#000000 size=+0>Code Postal:</FONT></TD>
<TD><INPUT type="text" maxLength=40 name=Code-postal size="50" value=" "></TD>
</TR>
<TR>
<TD><FONT face="Times New Roman, Times, serif" color=#000000 size=+0>Votre adresse email:</FONT></TD>
<TD><INPUT type="text" maxLength=100 name=EMAIL size="50" value=" "></TD>
</TR>
<TR>
<TD><FONT face="Times New Roman, Times, serif" color=#000000 size=+0>Instructions supplémentaires,<br>questions ou commentaires:</FONT></TD>
<TD><TEXTAREA cols=40 name=Commentaires rows=6></TEXTAREA></TD>
</TR>
</TBODY>
</TABLE>
</CENTER>
<P>
<CENTER>
<INPUT onblur=merci() type=submit value=" Appliquer pour commander">
<INPUT name=reset type=reset value=Effacer>
</CENTER>
</P>
</FORM>
et tu rajoutes ces lignes où tu veux
<script type="text/javascript">
function addition()
{
var prix01=document.formulaire.prix01.value
var prix02=document.formulaire.prix02.value
var prix03=document.formulaire.prix03.value
var prix04=document.formulaire.prix04.value
var prix05=document.formulaire.prix05.value
var prix06=document.formulaire.prix06.value
var total=prix01+prix02+prix03+prix04+prix05+prix06
document.formulaire.Total.value=total
}
</script>
| |||||||
Petite astucienne | Bonjour NoNoZeBeSt,
Merci pour votre réponse si rapide. J'ai fait les changement que vous m'avez donné mais lorsque je clique sur la deuxième case, ça me donne une erreur de la page qui s'inscrit dans la barre de tâche au bas de l'écran et ça ne s'additionne pas. Je trouve le code intelligent, il ne doit pas manquer grand chose.
J'ai bien mis onChange="addition()" sur tous les champs des prix mais il n'y a rien sur le champ TOTAL, Est-ce qu'on devrait mettre quelque chose?
Voir mes changements plus bas.
Merci pour votre aide précieuse, Francyne
<script type="text/javascript">
function addition()
{
var prix01=document.formulaire.prix01.value
var prix02=document.formulaire.prix02.value
var prix03=document.formulaire.prix03.value
var prix04=document.formulaire.prix04.value
var prix05=document.formulaire.prix05.value
var prix06=document.formulaire.prix06.value
var total=prix01+prix02+prix03+prix04+prix05+prix06
document.formulaire.Total.value=total
}
</script>
<center><Font size=4 Face="VERDANA,ARIAL,HELVETICA"><B><I>Pour commander, veuillez remplir ce formulaire.<font size=2><br>Entrez le numéro de la boucle désirée, son prix correspondant et le total.<br><font size=2 color=red>(Pour le prix de la boucle, ne pas taper les zéros. Ex.: Si $5.00, taper: 5)</font><br>Au plaisir de vous servir.</I></B></font></font></center>
<br>
<form action="mailto:fd@cybernaute.com?subject=Commande de boucles" method=post ENCTYPE="text/plain" name="formulaire">
<CENTER>
<TABLE border=3 width="100%" bgcolor=#E4E7F4>
<TBODY>
<TR>
<TD><FONT face="Times New Roman, Times, serif" color=#000000 size=+0>Boucles 1/2" - 1,30cm:</FONT></TD>
<TD><INPUT type="hidden" maxLength=40 name=FRANÇAIS: Boucles 1/2po Quantité: size="10" value=" "></TD>
</TR>
<TR>
<TD><FONT face="Times New Roman, Times, serif" color=#000000 size=+0>Numéro de la boucle:</FONT></TD>
<TD>
<INPUT type="text" maxLength=40 name=Numero01 size="5" value=" ">
<INPUT type="text" maxLength=40 name=Numero02 size="5" value=" ">
<INPUT type="text" maxLength=40 name=Numero03 size="5" value=" ">
<INPUT type="text" maxLength=40 name=Numero04 size="5" value=" ">
<INPUT type="text" maxLength=40 name=Numero05 size="5" value=" ">
<INPUT type="text" maxLength=40 name=Numero06 size="5" value=" ">
</TD>
</TR>
<TR>
<TD><FONT face="Times New Roman, Times, serif" color=#000000 size=+0>Prix/l'unité: <font size=2>(Ne pas taper les zéros)</FONT></TD>
<TD>
<INPUT type="text" maxLength=40 name=prix01 size="5" value=" " onChange="addition()" >
<INPUT type="text" maxLength=40 name=prix02 size="5" value=" " onChange="addition()" >
<INPUT type="text" maxLength=40 name=prix03 size="5" value=" " onChange="addition()" >
<INPUT type="text" maxLength=40 name=prix04 size="5" value=" " onChange="addition()" >
<INPUT type="text" maxLength=40 name=prix05 size="5" value=" " onChange="addition()" >
<INPUT type="text" maxLength=40 name=prix06 size="5" value=" " onChange="addition()" >
</TD>
</TR>
<TR>
<TD><FONT face="Times New Roman, Times, serif" color=#000000 size=+0>Total: <font size=2>(Taper le montant sans les zéros)</font></FONT></TD>
<TD><INPUT type="text" maxLength=40 name=total size="10" value=" "></TD>
</TR> | |||||||
Petit astucien | je suis désolé je ne trouve pas l'erreur,
peut-etre que quelqu'un pourra t'aider, mais ce soir je dois partir
bonne chance et bonnes fêtes de fin d'année | |||||||
Petite astucienne | Bonne Année 2006 NoNoZeBeSt. Ce n'est pas grave. En espérant que quelqu'un d'autre pourra m'aider.
Francyne | |||||||
Petit astucien | dans ta fonction addition tu n'aurais pas oublié des ";"??
et par la meme occasion quand tu fais onChange="addition();" oublie pas les ";" | |||||||
Petite astucienne | Bonjour Yct62,
J'ai mis des ; après la fonction et sur le formulaire onChange mais ça crée une erreur :
<script type="text/javascript">
function addition();
{
var prix01=document.formulaire.prix01.value
var prix02=document.formulaire.prix02.value
var prix03=document.formulaire.prix03.value
var prix04=document.formulaire.prix04.value
var prix05=document.formulaire.prix05.value
var prix06=document.formulaire.prix06.value
var total=prix01+prix02+prix03+prix04+prix05+prix06
document.formulaire.total.value=total
}
</script>
J'ai eu ce code de NoNoZeBeSt. Lorsque je saisie un chiffre, ce dernier s'affiche dans la case total mais si je saisie un autre chiffre dans une autre case, l'addition ne de fait pas. Exemple: Si je mets: 5 dans la première case et 5 dans la deuxième case, il s'affiche 55 dans la case Total alors que je devrais avoir : 10.
Je sais que ce n'est pas de la p'tit bière que je demande, mais j'imagnine que ça pourrait se faire certainement.
Merci à plutard j'espère, Francyne | |||||||
Petit astucien | non pas comme ca, lol, regarde :
<script type="text/javascript">
function addition()
{
var prix01=document.formulaire.prix01.value;
var prix02=document.formulaire.prix02.value;
var prix03=document.formulaire.prix03.value;
var prix04=document.formulaire.prix04.value;
var prix05=document.formulaire.prix05.value;
var prix06=document.formulaire.prix06.value;
var total=prix01+prix02+prix03+prix04+prix05+prix06;
document.formulaire.total.value=total;
}
</script> | |||||||
Petite astucienne | J'ai bien fait un copier coller de ton code mais ça donne toujours le même résultat. Le chiffre de la case 1 (5) s'affiche dans total et la case 2 (5) s'affiche à la suite de l'autre 5 dans la case total.
Comme ceci: Total: 55 au lieu de 10
Si je mets un autre chiffre dans la 3ième case le total devienr:
555 et non 15 et ainsi de suite.
L'addidion ne se fait pas.
à bientôt avec beaucoup d'espoir [smile]
Francyne | |||||||
Publicité | ||||||||
Petit astucien | essaye de faire : 'prix01'+'prix02'+.... | |||||||
Petite astucienne | eh bien ça ne fonctionne pas. Au lieu d'avoir le chiffre dans la case total, j'ai toute la ligne de prix.
Si jamais tu trouves, j'en serais vraiment contente.
Merci, Francyne | |||||||
Petit astucien | Re,
essaie comme cela
function addition()
{
var prix01=document.formulaire.prix01.value;
var prix02=document.formulaire.prix02.value;
var prix03=document.formulaire.prix03.value;
var prix04=document.formulaire.prix04.value;
var prix05=document.formulaire.prix05.value;
var prix06=document.formulaire.prix06.value;
var total=Number(prix01+prix02+prix03+prix04+prix05+prix06);
document.formulaire.total.value=total;
} | |||||||
Petite astucienne | Rebonjour NoNoZeBeSt,
C'est pas drôle de travailler la veille du jour de l'an, Hein?
J'ai essayé ton code suivant et lorsque je tape le deuxième chiffre dans la case 2, ça me donne: NaN dans la case total. Mais lorsque je tape le premier chiffre, ça inscrit le chiffre correctement dans la case total.
C'est la formule de l'addition qui fait défaut.
Je te mets la page de test pour voir le résultat.
Merci, à bientôt.
www.cybernaute.com/francyne.deschenes/BouclesBows/test.htm
function addition()
{
var prix01=document.formulaire.prix01.value;
var prix02=document.formulaire.prix02.value;
var prix03=document.formulaire.prix03.value;
var prix04=document.formulaire.prix04.value;
var prix05=document.formulaire.prix05.value;
var prix06=document.formulaire.prix06.value;
var total=Number(prix01+prix02+prix03+prix04+prix05+prix06);
document.formulaire.total.value=total;
} | |||||||
Petit astucien | c'est vrai, et en plus je reprend les cours dans deux jours...
pour ton problème
essaie comme cela :
function addition()
{
var prix01=new Number(document.formulaire.prix01.value);
var prix02=new Number(document.formulaire.prix02.value);
var prix03=new Number(document.formulaire.prix03.value);
var prix04=new Number(document.formulaire.prix04.value);
var prix05=new Number(document.formulaire.prix05.value);
var prix06=new Number(document.formulaire.prix06.value);
var total=Number(prix01+prix02+prix03+prix04+prix05+prix06);
document.formulaire.total.value=total;
}
et j'espère que ça va fonctionner cette fois-ci | |||||||
Petite astucienne | Youpi...Youpi...Youpi. Vive NoNoZeBeSt, tu es le meilleur.
Ça fonctionne tempête, je suis tellement heureuse, j'en reviens pas. Quel beau cadeau que tu me fais pour le nouvel an.
Merci beaucoup, tu es mon ange.
Amicalement, Francyne | |||||||
Petit astucien | Merci de tous ces compliments, je vais finir par rougir si ça continue[rougir]
Je te souhaite une bonne continuation pour ton site et en cas de problème le forum PC Astuces est là pour t'aider
@+ Modifié par NoNoZeBeSt le 01/01/2006 17:44 | |||||||
| ||||||||
Les bons plans du moment PC Astuces | Tous les Bons Plans | |||||||||||||||
| ||||||||||||||||
| Forum PC Astuces | © 1997-2021 Webastuces |  |
À LA UNE
PRATIQUE
LOGITHÈQUE
TABLETTE ET MOBILE
BONS PLANS
FONDS D'ÉCRAN
JEUX
FORUM
