Calcul javascript dans un formulaire

Question

Pages :

machalf

4 Jun 2011 à 12:26

Bonjour,
Je suis débutant en javascript et je voudrais faire un calcul dans un formulaire mais j'ai NaN comme résultat...
Voila une partie de ma page :


<script language="javascript">
	// Calcul du formulaire Article
	    function ArticleCalcul() {
	      with (document.articleform) {
	        revientneuf.value=achatneuf.value*frais.value;
	        revientechange.value = achatechange.value*frais.value;
	        venteneuf.value = revientneuf.value*marge.value;
	        venteechange.value = revientechange.value*marge.value;
	      }
	    }
</script>


<table class="calcul" cellpadding="3" cellspacing="3" rules="none" border="1">
	<tr>
		<th></th>
		<th>Achat</th>
		<th>Frais</th>
		<th>Revient</th>
		<th>Marge</th>
		<th>Vente</th>
	</tr>
	<tr>
		<td align="left">Neuf</td>
		<td><input id="achatneuf" name="achatneuf" type="?text" size="10" /></td>
		<td rowspan="2"><input id="frais" name="frais" id="frais" type="?text" size="10" /></td>
		<td><input id="revientneuf" name="revientneuf" type="?text" size="10" /></td>
		<td rowspan="2"><input id="marge" name="marge" type="?text" size="10" /></td>
		<td><input id="venteneuf" name="venteneuf" type="?text" size="10" /></td>
	</tr>
	<tr>
		<td align="left">&Eacute;change</td>
		<td><input id="achatneuf" name="achatechange" type="?text" size="10" /></td>
		<td><input id="revienrechange" name="revientechange" type="?text" size="10" /></td>
		<td><input id="venteechange" name="venteechange" type="?text" size="10"  /></td>
	</tr>
</table>

J'ai essayé de faire des modifications mais j'ai toujours le même résultat : NaN et qui veut dire que ce n'est pas un numérique Smiley bawling

Merci d'avance pour votre aide Smiley smile

lddsoft

4 Jun 2011 à 15:45

Bonjour,
Ton script est incomplet et comporte un certain nombre d'erreurs (il manque l'appel à la fonction ArticleCalcul(), "?text" au lieu de "text", 2 fois la même id "achatneuf", il manque la balise "form" (articleform) ...
Pourrais-tu proposer un code complet, s'il te plaît...
Cordialement

machalf

4 Jun 2011 à 15:56

Désolé un peu trop de nettoyage Smiley smile


<table class="calcul" cellpadding="3" cellspacing="3" rules="none" border="1"> 
    <tr> 
        <th></th> 
        <th>Achat</th> 
        <th>Frais</th> 
        <th>Revient</th> 
        <th>Marge</th> 
        <th>Vente</th> 
    </tr> 
    <tr> 
        <td align="left">Neuf</td> 
        <td><input id="achatneuf" name="achatneuf" type="?text" size="10" onchange="ArticleCalcul()" /></td> 
        <td rowspan="2"><input id="frais" name="frais" id="frais" type="?text" size="10" /></td> 
        <td><input id="revientneuf" name="revientneuf" type="?text" size="10" /></td> 
        <td rowspan="2"><input id="marge" name="marge" type="?text" size="10" /></td> 
        <td><input id="venteneuf" name="venteneuf" type="?text" size="10" /></td> 
    </tr> 
    <tr> 
        <td align="left">&Eacute;change</td> 
        <td><input id="achatechange" name="achatechange" type="?text" size="10" onchange="ArticleCalcul()" /></td> 
        <td><input id="revienrechange" name="revientechange" type="?text" size="10" /></td> 
        <td><input id="venteechange" name="venteechange" type="?text" size="10"  /></td> 
    </tr> 
</table>

Merci

machalf

4 Jun 2011 à 16:14

Pardon, un peu trop speed... Voici tout le code, il faut savoir qu'il y a l'application 4eDimension derrière, mais cela ne devrait pas gêner Smiley biggrin

Cette page est appelé depuis une autre page "index" par 4eDimension d'ou le manque de balise HTML, head, body etc... Ces balises sont dans la page index.


<script language="javascript">
	// Calcul du formulaire Article
	    function ArticleCalcul() {
	      with (document.articleform) {
	        revientneuf.value=achatneuf.value*frais.value;
	        revientechange.value = achatechange.value*frais.value;
	        venteneuf.value = revientneuf.value*marge.value;
	        venteechange.value = revientechange.value*marge.value;
	      }
	    }
</script>
<div id="page">

	<div class="formhaut">
		<center>
			<span class="titresaisie">Saisie d&acute;un article</span>
			<br />
			<!--#4DIF (vweb_Mess#"")-->
				<span class="message"><!--#4DVAR vweb_Mess--></span>
			<!--#4DENDIF-->
		</center>
	</div>

	<div class="formset">
		<form method="POST" action="141406?Articlesmod$<!--#4DSCRIPT/web_hasard-->" name="articleform" onsubmit="return articleformvalidat(this)">
			<table cellpadding="5" cellspacing="5">
				<tr>
					<td><label>Reference<span class="comment">*</span></label></td>
					<td><input id="reference" name="reference" type="text" size="50" maxlength="50" value="<!--#4DVAR [Articles]Reference-->" /></td>
				</tr>
				<tr>
					<td><label>Designation<span class="comment">*</span></label></td>
					<td><input name="designation" type="text" size="50" maxlength="50" value="<!--#4DVAR [Articles]Designation-->" /></td>
				</tr>
				<tr>
					<td><label>Famille<span class="comment">*</span></label></td>
					<td><input name="famille" type="text" size="50" maxlength="50" value="<!--#4DVAR [Articles]Famille-->" /></td>
				</tr>
				<tr>
					<td><label>Fournisseur<span class="comment">*</span></label></td>
					<td><input name="fournisseur" type="text" size="50" maxlength="50" value="<!--#4DVAR [Articles]Fournisseur-->" /></td>
				</tr>
				<tr>
					<td><label>Type<span class="comment">*</span></label></td>
					<td>
						<select name="type" size="1">
							<!--#4DLOOP tweb_texte-->
								<!--#4DIF (tweb_texte{tweb_texte}=[WebLiens]Categorie-->
								<option selected>
								<!--#4DELSE-->
								<option>
								<!--#4DENDIF-->
								<!--#4DVAR tweb_texte{tweb_texte}-->
								</option>
							<!--#4DENDLOOP-->
						</select>
					</td>
				</tr>
				<!--#4DIF ((vweb_CatUser="Administrateur")|(vweb_CatUser="Programmeur"))-->
				<tr>
					<td colspan="2">
						<center>
						<table class="calcul" cellpadding="3" cellspacing="3" rules="none" border="0">
							<colgroup>
								<col width="16%" span="6" />
							</colgroup>
							<tr><td colspan="6"><hr style="border: 1px solid black;width:80%;" /></td></tr>
							<tr>
								<th><button type="submit" style="width:80px;" name="majprix" tabindex="6">M&agrave;J GSX--></button></th>
								<th>Achat</th>
								<th>Frais</th>
								<th>Revient</th>
								<th>Marge</th>
								<th>Vente</th>
							</tr>
							<tr>
								<td align="left">Neuf</td>
								<td><input class="montant" id="achatneuf" name="achatneuf" type="text" size="10" maxlength="10" value="<!--#4DVAR [Articles]Prix achat neuf-->" onchange="ArticleCalcul()"/></td>
								<td rowspan="2"><input class="multi" id="frais" name="frais" id="frais" type="text" size="10" maxlength="10" value="<!--#4DVAR [Articles]Frais-->" readonly /></td>
								<td><input class="montant" id="revientneuf" name="revientneuf" type="text" size="10" maxlength="10" value="<!--#4DVAR [Articles]Prix revient neuf-->" readonly /></td>
								<td rowspan="2"><input class="multi" id="marge" name="marge" type="text" size="10" maxlength="10" value="<!--#4DVAR [Articles]Marge-->" readonly /></td>
								<td><input class="montant" id="venteneuf" name="venteneuf" type="text" size="10" maxlength="10" value="<!--#4DVAR [Articles]Prix vente neuf-->" readonly /></td>
							</tr>
							<tr>
								<td align="left">&Eacute;change</td>
								<td><input class="montant" id="achatechange" name="achatechange" type="text" size="10" maxlength="10" value="<!--#4DVAR [Articles]Prix achat echange-->&euro;" onchange="ArticleCalcul()" /></td>
								<td><input class="montant" id="revienrechange" name="revientechange" type="text" size="10" maxlength="10" value="<!--#4DVAR [Articles]Prix revient echange-->&euro;" readonly /></td>
								<td><input class="montant" id="venteechange" name="venteechange" type="text" size="10" maxlength="10" value="<!--#4DVAR [Articles]Prix vente echange-->&euro;" readonly /></td>
							</tr>
							<tr><td colspan="6"><hr style="border: 1px solid black;width:80%;" /></td></tr>
							<tr>
								<td colspan="3"><input type="checkbox" name="bweb" value="bweb" style="float: right;">Article Web</td>
								<td colspan="3"><input class="stock" name="stocka" type="text" size="5" maxlenght="5" value="<!--#4DVAR [Articles]Stock auto-->" readonly style="float: right;" />Stock en cours</td>
							</tr>
							<tr>
								<td colspan="3"><input type="checkbox" name="bmanuel" value="bmanuel" style="float: right;" >Prix manuel</td></td>
								<td colspan="3"><input class="stock" name="stocki" type="text" size="5" maxlenght="5" value="<!--#4DVAR [Articles]Stock inventaire-->" style="float: right;" />Inventaire</td>
							</tr>
						</table>
						</center>
					</td>
				</tr>
				<!--#4DELSE-->
				<tr>
					<td><label>Prix neuf<span class="comment">*</span></label></td>
					<td><input class="montant" name="venteneuf" type="text" size="50" maxlength="50" value="<!--#4DVAR [Articles]Prix vente neuf-->" /></td>
				</tr>
				<tr>
					<td><label>Prix &eacute;change<span class="comment">*</span></label></td>
					<td><input class="montant" name="venteechange" type="text" size="50" maxlength="50" value="<!--#4DVAR [Articles]Prix vente echange-->" /></td>
				</tr>
				<!--4DENDIF-->
			</table>
	</div>
			<div class="formbas">
				<center>
					<div class="boutons">
						<button type="button" name="cancel" onClick="self.close()" >Fermer</button>
						<button type="submit" name="ok" >Enregistrer les modifications</button>
					</div>
					<span class="comment">* OBLIGATOIRES.</span>
				</center>
		</form>
	</div>
	
	<script language="javascript">
		document.forms[0].reference.focus();
	</script>

</div>

~~supprimé~~

5 Jun 2011 à 15:00

Bonjour à toutes et à tous,

voici un petit exemple de comment faire une multiplication :

function calcul()
{
	var RevientNeuf = document.getElementById("revientneuf");
	var AchatNeuf   = document.getElementById("achatneuf").value;
	var Frais       = document.getElementById("frais").value;

	RevientNeuf.value = eval(AchatNeuf + ' * ' + Frais);
}

1) 'eval' est une méthode qui évalue une expression mathématique.
2) le '+' n'est pas une addition mais une concaténation de chaine de caractères.
3) l'expression a évaluer est : AchatNeuf * Frais.
4) le résultat est rangé dans RevientNeuf sous forme d'une chaine de caractères.
5) maintenant c'est à toi d'enrichir la fonction calcul().

@+ Smiley smile

Modifié par Artemus24 (05 Jun 2011 - 15:05)

machalf

5 Jun 2011 à 16:25

Bonjour,
Trés sympathique, je vais essayer ça.
Merci encore Smiley biggrin

Su4p

6 Jun 2011 à 14:40

je ferais un parseFloat plutôt qu'un eval ...

machalf

8 Jun 2011 à 09:37

Bonjour,
J'ai inséré le script d'Artemus24 mais qu'il soit dans la page html ou dans un fichier à part .js j'ai la même erreur sur la console et il ne calcul rien Smiley bawling

TypeError:Result of expression 'calcul' [object HTMLInputElement]] is not a function.
Je ne comprend pas Smiley rolleyes

~~supprimé~~

8 Jun 2011 à 12:04

Bonjour à toutes et à tous,

donnes-nous le code HTML et Javascript en entier, si tu veux que l'on te réponde !

@+

~~supprimé~~

8 Jun 2011 à 12:22

bonjour à nouveau,

à tout hasard, je te donne le code html qui m'a servi de test.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<title></title> 
<style type="text/css">
body {
		background-color	: lightyellow;
}

span {
		display				: inline-block;
		width				: 100px;
}
</style>
<script type="text/javascript">
function calcul()
{
	var RevientNeuf = document.getElementById("revientneuf");
	var AchatNeuf   = document.getElementById("achatneuf").value;
	var Frais       = document.getElementById("frais").value;

	RevientNeuf.value = eval(AchatNeuf + ' * ' + Frais);

	return false;
}
</script>
</head> 

<body> 
    <form method="post" action="" name="formulaire1">

        <span>Achat Neuf</span>		<input id="achatneuf"      name="achatneuf"      type="text" size="10"></input><br />
        <span>Frais</span>			<input id="frais"          name="frais"          type="text" size="10"></input><br />
        <span>Revient Neuf</span>	<input id="revientneuf"    name="revientneuf"    type="text" size="10"></input><br />
		<br />
		<input type="reset"  name="reset"  value="  Tout recommencer  "></input>
		<input type="submit" name="submit" value="   Valider   "  onclick="return calcul();"></input><br />
    </form>
</body> 
</html>

Cela fonctionne sous MSIE 8.0, Mozilla Firefox, Google Chrome, Opera et Safari !

Récupère ce code et teste le chez toi.

@+

machalf

8 Jun 2011 à 12:45

Hello,
Il fonctionne trés bien ton exemple Smiley smile

Je vais finir par trouver le problème...

Ton script peut être déplacé dans un fichier externe tel quel ?
Il se peut qu'il y est des chiffre à virgule, là il ne calcul plus très bien Smiley eek

Merci.

@+

machalf

8 Jun 2011 à 13:19

Re,
Voila toute la page regroupée pour test, fonctionne pas Smiley bawling


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
	<head>
		<title>After +</title>
		<meta name="description"     content="Soci&eacute;t&eacute; AFTER+, le centre de maintenance agr&eacute;&eacute; Apple en Guadeloupe.">
		<meta name="keywords"        content="apple,informatique,cmaa,lexmark,maintenance,d&eacute;pannage,sauvegarde,macintosh,imac,ipad,macbook">
		<meta name="author"         content="half, half@parlonsmac.com">
		<meta name="DC.Publisher"   content="half, half@parlonsmac.com">
		<meta name="DC.Date"        content="2011-20-04T033:00-04:00">
		<meta name="DC.Language"    content="fr">
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<meta http-aquiv="refresh" content="60">
		<!--<style type="text/css"></style>-->
		<link rel="stylesheet" type="text/css" media="screen" href="normal.css" />
		<link rel="alternate" media="print" href="/public/pcontact.html"> <!--Pour imprimer le plan -->
		<link rel="icon" type="image/png" href="favicon.png" />
		<script type="text/javascript" src="/jquery.js"></script>
		<script type="text/javascript" src="/jscripts.js"></script>
	</head>

	<body style="margin: 0;padding: 0;width: 100%px;height: 100%;">
		<script type="text/javascript">
			function calcul() 
			{ 
			    var RevientNeuf = document.getElementById("revientneuf"); 
			    var AchatNeuf   = document.getElementById("achatneuf").value; 
			    var Frais       = document.getElementById("frais").value; 
			 
			    RevientNeuf.value = eval(AchatNeuf + ' * ' + Frais);
			    
			    return false;
			}
		</script>
		<div class="formset">
			<form method="POST" action="141406?Articlesmod$40520" name="articleform" onsubmit="return articleformvalidat(this)">
				<table class="calcul2" cellpadding="3" cellspacing="3" rules="none" border="0">
					<colgroup>
						<col width="16%" span="6" />
					</colgroup>
					<tr>
						<th></th>
						<th>Achat</th>
						<th>Frais</th>
						<th>Revient</th>
						<th>Marge</th>
						<th>Vente</th>
					</tr>
					<tr>
						<td align="left">Neuf</td>
						<td><input id="achatneuf" type="text" value="16.16" onchange="return calcul();" /></td>
						<td><input id="frais" type="text" size="10" maxlength="10" value="1.3" onchange="return calcul();" /></td>
						<td><input id="revientneuf" type="text" value="21.01" /></td>
						<td><input id="marge" type="text" value="2" onchange="return calcul();" /></td>
						<td><input id="venteneuf" type="text" value="42.02" /></td>
					</tr>
					<tr>
						<td align="left">&Eacute;change</td>
						<td><input id="achatechange" type="text" value="0&euro;" onchange="return calcul();" /></td>
						<td><input id="revientechange" type="text" value="0&euro;" /></td>
						<td><input id="venteechange" type="text" value="0&euro;" /></td>
					</tr>
					<tr>
						<td></td>
						<td>
							<input class="boutton" type="button" name="majprix" value="M&agrave;J Prix" onClick="self.location.href='141406?Articlesmod/majprix$34862'" style="width:80px;" onMouseOver="javascript:this.style.cursor='pointer' ;" />
						</td>
						<td colspan="3">
							<center>
								<span class="comment">Derni&egrave;re mise &agrave jour le 00/00/00</span>
							</center>
						</td>
						<td>
							<input class="boutton" type="button" name="calcul" value="Calculer" onClick="self.location.href='141406?Articlesmod/calcul$26874'" style="width:80px;" onMouseOver="javascript:this.style.cursor='pointer' ;" />
						</td>								
					</tr>
				</table>
			</form>
		</div>		
	</body>
</html>

MacHalf

~~supprimé~~

8 Jun 2011 à 17:40

Bonjour à toutes et à tous,

il y a quelques petites erreurs dans ton script :

1) aquiv et equi --> <meta http-aquiv="refresh" content="60"> au lieu de <meta http-equiv="refresh" content="60">

2) il n'est pas nécessaire de faire un onchange="return calcul();" à chaque fois, car la question que tu dois te poser est :

-- dois-je vérifier quelque chose, si OUI alors le return calcul() est valide
-- dois-je calculer quelque chose, si OUI alors le return calcul() n'est pas à sa place.

Donne plutôt un nom parlant à ta fonction du genre Verif ou Compute.
Sinon place l'appel de la fonction calcul quand tu fais un calcul lors de la validation finale, c'est à dire dans onsubmit.

Dans ce cas, la fonction finale devra se décomposer en deux parties :

--> les contrôles
--> la validation et les mises en forme

3) calcul est déjà une fonction que tu utilises.
Je l'ai nommé calcul_bis() et cela a fonctionné !

4) ah oui aussi, j'ai remonté la partie javascript de body dans le head après tout les scripts. Elle me semble plus approprié à cet endroit.

@+
Modifié par Artemus24 (08 Jun 2011 - 17:42)

machalf

11 Jun 2011 à 14:36

Bonjour,
Merci Artemus24, avec ses modifications le formulaire fonctionne, il ne me reste plus qu'a le remettre à sa place.
Les pages sont fabriquées à la volé par l'application 4D suivant des conditions, la page html vient de plusieurs pages différentes.
Il me reste une petite question Smiley rolleyes

Puis je utiliser la virgule, le calcul fonctionne avec des chiffres avec un point mais si je met une virgule, il ne prend en compte que la partie décimale... Smiley eek

Encore merci et bon week-end à tous Smiley biggrin

machalf

11 Jun 2011 à 15:34

Re

J'oublié...
A part les virgules, je voudrais pouvoir arrondir à 2 chiffres après la virgule Smiley biggol

machalf

11 Jun 2011 à 17:31

Alors pour les virgules j'ai trouvé replace(',','.') mais il y a peut être mieux Smiley rolleyes

~~supprimé~~

12 Jun 2011 à 09:30

Bonjour à toutes et à tous,

au départ, je pensais que tu voulais simplement faire une multiplication basique.

L'exemple ci-dessous, effectue d'abord la substitution de la virgule afin d'avoir un point. Ensuite convertit une chaîne de caractères en nombre flottant, et fait le calcul que tu désires.

Mais le problème demeure dans la présentation du résultat. Si comme je le suppose, il s'agit de l'euro alors tu dois présenter ton nombre flottant avec deux chiffres après la virgule. Le "+0.5" est un arrondi au plus près afin de ne pas avoir un résultat trop aberrant.

Puis pour terminer, on convertit le résultat en chaîne de caractères, on remplace le point par la virgule et on range le résultat dans la zone de ton FORM. J'ai fait en sorte de te donner un code un peu plus compacte.

N'oublie pas de supprimer le "return false;", qui ici, ne sert qu'à laisser le résultat dans la zone lorsque tu soumets ton FORM.

function calcul() 
{
    var AchatNeuf   = parseFloat(document.getElementById("achatneuf").value.replace(/\,/g,"\."));
    var Frais       = parseFloat(document.getElementById("frais").value.replace(/\,/g,"\."));

	var xx = parseInt((AchatNeuf * Frais * 100) + 0.5) / 100;

	document.getElementById("revientneuf").value = xx.toString().replace(/\./g,"\,");

    return false; 
}

J'espère avoir répondu à ton attente !

@+
Modifié par Artemus24 (12 Jun 2011 - 10:59)

machalf

12 Jun 2011 à 13:22

Bonjour,
C'est magique Smiley biggrin

Je vais essayer toute à l'heure Smiley cligne

Bon dimanche à tous.
PS: Pour moi il est 7h du mat Smiley smile

~~supprimé~~

12 Jun 2011 à 13:35

Bonjour à toutes et à tous,

par curiosité, tu te trouves où sur la planète ? Le canada, je suppose ?

Moi, je t'écris de France, d'une belle région qui est la Dordogne.

A bientôt.
@+

machalf

12 Jun 2011 à 13:41

Hello,
Bon fuseau Smiley smile

Non, je suis en Guadeloupe et à 7h du mat il doit déjà faire dans les 32°...
On va aller se rafraichir un peu avec les enfants Smiley cligne

@+

Pages :

Sujet clos