Accueil > Forum > > > > formulaire calcul javascript débutant
 formulaire calcul javascript débutant
jeudi 23 avril 2009 à 15:35:25 |
formulaire calcul javascript débutant
badziz
|
Bonjour,
J'ai réalisé un petit formulaire de calcul en javascript et html mais j'ai un problème pour l'affichage des résultats, voici le code:
<script type="text/javascript">
function valider(){
f = document.form;
var total_revenus,total_charges,total_credits,res_1,res_2,res_3,resultat;
res_1 = Math.round((total_charges / total_revenus)*100);
alert(res_1);
res_2 = Math.round((total_credits / total_revenus)*100);
alert(res_2);
res_3 = (100 - (res_1 + res_2));
alert(res_3);
resultat = res_1+res_2;
alert(resultat);
f.pr_charg.value = res_1;
f.pr_cred.value = res_2;
f.reste.value = res_3;
}
</script>
</head>
<body>
<p><b>Calcul</b></p>
<form name="form">
<table border="0" width="100%" cellpadding="3" cellspacing="0">
<tr>
<td colspan="2"><b>Revenus nets</b></td>
</tr>
<tr>
<td width="60%">Revenu mensuel emprunteur : </td>
<td><input type="text" name="rev_emp" value="0" size="8" maxlength="6" /> ¤</td>
</tr>
<tr><td>Revenu mensuel co-emprunteur : </td>
<td><input type="text" name="rev_coemp" value="0" size="8" maxlength="6" /> ¤</td>
</tr>
<tr>
<td>Autres revenus mensuels récurrents : </td>
<td><input type="text" name="rev_autres" value="0" size="8" maxlength="6" /> ¤</td>
</tr>
<tr>
<td colspan="2"> </td>
</tr>
<tr>
<td colspan="2"><b>Autres charges</b></td>
</tr>
<tr>
<td>Pension alimentaire versée : </td>
<td><input type="text" name="chg_pensions" value="0" size="8" maxlength="6"> ¤</td>
</tr>
<tr>
<td>Autres charges récurrentes : </td>
<td><input type="text" name="chg_autres" value="0" size="8" maxlength="6"> ¤</td>
</tr>
<tr>
<td colspan="2"><b>Crédits</b></td>
<td width="40%"><b>Remboursement</b></td>
</tr>
<tr>
<td>1) </td>
<td width="40%">
<input type="text" value="0" size="8" name="remb1" /> ¤/mois</td>
</tr>
<tr>
<td>2) </td>
<td width="40%">
<input type="text" value="0" size="8" name="remb2" /> ¤/mois</td>
</tr>
<tr>
<td>3)</td>
<td width="40%">
<input type="text" value="0" size="8" name="remb3" /> ¤/mois</td>
</tr>
<tr>
<td>
<input type="submit" value="Ok" on_click="valider()" /><input type="reset" value="Effacer" /></td>
</tr>
<tr>
<td>Selon les informations que vous nous avez données, votre taux est de <input type="text" name="resultat" value="0" /></td>
</tr>
<tr>
<td>Calcul du pourcentage des charges par rapport au revenu: <input type="text" name="pr_charg" value="0" /></td>
</tr>
<tr>
<td>Calcul du pourcentage du/des crédits par rapport au revenu: <input type="text" name="pr_cred" value="0" />%</td>
</tr>
<tr>
<td>Reste à vivre: <input type="text" name="reste" value="0" />%</td>
</tr>
</table>
</form>
Donc les alert(); me donnent bien les résultats mais j'aimerais plutot afficher ces résultats sous le bouton valider dans du texte (sans input si possible). Quelqu'un a une idée?
|
|
jeudi 23 avril 2009 à 15:47:23 |
Re : formulaire calcul javascript débutant
Bul3
|
Bonjour, >> mais j'aimerais plutot afficher ces résultats sous le bouton valider dans du texte (sans input si possible).
innerHTML d'un div , innerHTML d'un span... ou tout autre balise qui pourrait te plaire
( value ou innerHTML, faut voir )
Cordialement [ mon Site] [ M'écrire]  Bul
|
|
jeudi 23 avril 2009 à 17:16:51 |
Re : formulaire calcul javascript débutant
badziz
|
J'ai essayé de changer par: f.pr_charg.innerHTML = res_1; et dans la partie html: <td>Reste à vivre: <div id="pr_charg"></div>%</td> Mais ça ne fonctionne pas, j'ai du oublier quelque chose... |
|
jeudi 23 avril 2009 à 17:52:29 |
Re : formulaire calcul javascript débutant
Bul3
|
>>f.pr_charg.innerHTML
le div n'a pas de name mais un id :
document.getElementById("pr_charg").innerHTML=res_1;
@+
|
|
jeudi 23 avril 2009 à 18:09:57 |
Re : formulaire calcul javascript débutant
badziz
|
ok merci ça a l'air de fonctionner par contre l'affichage ne dure qu'un bref instant et ensuite tout le formulaire se remet à 0, pourquoi?
|
|
jeudi 23 avril 2009 à 19:07:27 |
Re : formulaire calcul javascript débutant
Bul3
|
<form name="form"> ...
<input type="submit" value="Ok" on_click="valider()" />
ton formulaire est soumis, envoyée à la même page
car pas d'action= ( elle est rechargée )
un formulaire c'est fait pour être envoyé... normalement.
évite les name= à des noms connus !! form ici !
un jour ou l'autre ça te jouera des tours...
c'est onclick pas on_click !
d'ailleurs tu n'utilises pas une chose normale/standard... pour le submit !
pas de onclick ! et action manque
<form action="page à qui envoyer.htm ou php ou.... "
name="frm" onsubmit="return (valider());"> ...
<input type="submit" value="Ok" />
le formulaire sera envoyé vers ce qu'il y a dans action si la fonction
retourne true, non envoyé sin elle retourne false
si tu ne veux jamais envoyer ( on utilise rarement un bouton submit
dans ce cas ) mais
<form name="frm" onsubmit="void(valider());"> ...
<input type="submit" value="Ok" />
|
|
jeudi 23 avril 2009 à 19:29:29 |
Re : formulaire calcul javascript débutant
badziz
|
pour le on_click pas de soucis c'était bien onClick dans mon code ;)
Pour ce qui est d'envoyé le formulaire, justement celui là ne doit pas être envoyé et simplement afficher les résultats.
J'ai fait les changements mais apparemment toujours le même problème. Voila ce que mon code donne:
<script type="text/javascript">
function valider(){
f = document.frm;
var total_revenus,total_charges,total_credits,res_1,res_2,res_3,resultat = 0;
total_revenus = parseInt(f.rev_emp.value) + parseInt(f.rev_coemp.value) + parseInt(f.rev_autres.value);
total_charges = parseInt(f.chg_pensions.value) + parseInt(f.chg_autres.value);
total_credits = parseInt(f.remb1.value) + parseInt(f.remb2.value) + parseInt(f.remb3.value);
if(total_revenus == 0){
alert("Veuillez indiquer au moins un revenu.");
f.rev_emp.focus();
return false;
}
res_1 = Math.round((total_charges / total_revenus)*100);
res_2 = Math.round((total_credits / total_revenus)*100);
res_3 = (100 - (res_1 + res_2));
resultat = res_1+res_2;
document.getElementById("resultat").innerHTML=resultat;
document.getElementById("pr_charg").innerHTML=res_1;
document.getElementById("pr_cred").innerHTML=res_2;
document.getElementById("reste").innerHTML=res_3;
}
</script>
</head>
<body>
<p><b>Calcul</b></p>
<form name="frm" onSubmit="void(valider());" action="taux_endettement.html">
<table border="0" width="100%" cellpadding="3" cellspacing="0">
<tr>
<td colspan="2"><b>Revenus nets</b></td>
</tr>
<tr>
<td width="60%">Revenu mensuel emprunteur : </td>
<td><input type="text" name="rev_emp" value="0" size="8" maxlength="6" /> €</td>
</tr>
<tr>
<td>Revenu mensuel co-emprunteur : </td>
<td><input type="text" name="rev_coemp" value="0" size="8" maxlength="6" /> €</td>
</tr>
<tr>
<td>Autres revenus mensuels récurrents : </td>
<td><input type="text" name="rev_autres" value="0" size="8" maxlength="6" /> €</td>
</tr>
<tr>
<td colspan="2"> </td>
</tr>
<tr>
<td colspan="2"><b>Autres charges</b></td>
</tr>
<tr>
<td>Pension alimentaire versée : </td>
<td><input type="text" name="chg_pensions" value="0" size="8" maxlength="6"> €</td>
</tr>
<tr>
<td>Autres charges récurrentes : </td>
<td><input type="text" name="chg_autres" value="0" size="8" maxlength="6"> €</td>
</tr>
<tr>
<td colspan="2"><b>Crédits</b></td>
<td width="40%"><b>Remboursement</b></td>
</tr>
<tr>
<td>1) </td>
<td width="40%">
<input type="text" value="0" size="8" name="remb1" /> €/mois</td>
</tr>
<tr>
<td>2) </td>
<td width="40%">
<input type="text" value="0" size="8" name="remb2" /> €/mois</td>
</tr>
<tr>
<td>3)</td>
<td width="40%">
<input type="text" value="0" size="8" name="remb3" /> €/mois</td>
</tr>
<tr>
<td>
<input type="submit" value="Ok" /><input type="reset" value="Effacer" /></td>
</tr>
<tr><td>Selon les informations que vous nous avez données, votre taux est de <div id="resultat"></div></td></tr>
<tr><td>Calcul du pourcentage des charges par rapport au revenu: <div id="pr_charg"></div>%</td></tr>
<tr>
<td>Calcul du pourcentage du/des crédits par rapport au revenu: <div id="pr_cred"></div>%</td>
</tr>
<tr>
<td>Reste à vivre: <div id="reste"></div>%</td>
</tr>
</table>
</form>
|
|
jeudi 23 avril 2009 à 20:16:51 |
Re : formulaire calcul javascript débutant
kazma
|
bonjour
c'est ta facon d'appeler la function qui est mauvaise
normalement de cette facon ca devrait marcher
<button onclick=' valider() '>resultat</button>
|
|
vendredi 24 avril 2009 à 10:09:11 |
Re : formulaire calcul javascript débutant
Bul3
|
<form name="frm" onsubmit="valider(); return false;">
si pas d'envoi, action inutile.
sans préjuger du reste....
|
|
vendredi 24 avril 2009 à 16:41:48 |
Re : formulaire calcul javascript débutant
|
Cette discussion est classée dans : calcul, total, res, charges, revenus
 Répondre à ce message
 Sujets en rapport avec ce message
petit calcul automatique [ par nougitch ]
Bonjour,Je souhaite mettre en place un calcul automatique avec deux champs texte "c1" et "c2" puis un troisième "total", équivalent à "c1" + "c2".J'ai
Besoins d'aide :( :Besoin d'aide sur Problème de resultat sur un calcul [ par takali ]
Bonjour à tous Voila j'ai fait un simple calcul en javascript qui doit me retourné un resultat, le problème c'est que si le nombre si je fait 1.50 + 1
Problèmes avec un nombre et les decimal [ par takali ]
Voila j'ai fait un simple calcul en javascript qui doit me retourné un resultat, le problème c'est que si le resultat retourné sera 4.50 le zero et au
Problèmes de calcul d'un nombre avec les decimal [ par takali ]
Voila j'ai fait un simple calcul en javascript qui doit me retourné un resultat, le problème c'est que si le resultat retourné sera 4.50 le zero et au
ça ma caC la têt!!!(formulaire html sous netscape) [ par rajolalaina ]
bonjour,je voudrais savoir pouquoi mon script ne fonctionne pas sous netscape ou firefox. Le voici :functioncalculerTotal () { var total=eval(0);tot
FORMULAIRE ET CALCUL DU TOTAL JAVASCRIPT/PHP [ par fidecourt ]
Bonjour à tous, langage utilisé : PHP J'ai un souci : j'ai un formulaire nommé "ChoixArticle" qui comporte les infos suivantes Ref article hauteur lar
fonction calcul() stock [ par lordlifen ]
Bonjour, J'ai des produits avec chacun son stock et j'aimerais pouvoir recuperer le total du stock des produits. Voici mon code if (isset($_POST['id
feuille de calcul dans access [ par marcus275 ]
Est il possible d'insérer une feuille de calcul type excell dans un formuliare access : J'aimerais avoir un tableau qu'on pourrait compléter, donc i
script pour du calcul dans un pdf sous adobe [ par asreum ]
Bonjour, Voilà, je ne connais rien en script, mais j'aurais besoin d'aide : J'ai un formulaire dans lequel je fais la somme de plusieurs valeurs (to
Calcul dynamique [ par reunionnais974 ]
Bonjour à tous,j'ai un souci de compatibilité entre ie6 et Mozillia pour un calucl voici le code :
 Livres en rapport
|
Derniers Blogs
 JOYEUX ANNIVERSAIRE NIXJOYEUX ANNIVERSAIRE NIX par ebartsoft
Souhaitons un bon et joyeux anniversaire à notre hôte à tous, Nix.
Je ne le répéterais jamais assez mais sans lui rien ne serait possible. Il défit en permanence les lois de la gravité et comme il le dit si bien, si tu lui fais confiance ça devra...
Cliquez pour lire la suite de l'article par ebartsoft IMAGINE CUP 2012, MAKE A SIGN EN FINALEIMAGINE CUP 2012, MAKE A SIGN EN FINALE par junarnoalg
Voilà qui est fait, la nouvelle est officielle ! L'équipe belge "Make a Sign" va au pays des kangourous défendre son projet dans la catégorie Software Design. http://www.imaginecup.com/CompetitionsContent/Competition/WorldwideFinalists.aspx V...
Cliquez pour lire la suite de l'article par junarnoalg KINECT 1.5 IS OUT !KINECT 1.5 IS OUT ! par Vko
La version 1.5 du Kinect For Microsoft vient tout juste de sortir ! Plein de nouveautés: Tracking de squelette en Near Mode Détection en position assise Détection faciale avec un SDK dédié Documentation et des guideline (enfin) Un out...
Cliquez pour lire la suite de l'article par Vko LES ACTUALITéS DE LA SEMAINE SUR C2I.FR (14 MAI - 20 MAI) LES ACTUALITéS DE LA SEMAINE SUR C2I.FR (14 MAI - 20 MAI) par richardc
Mise à jour des Web API du 14 Mai
Réservez dès maintenant votre journée du 20 juin pour le Windows Azure Dev Camp 2012 à Paris
Mise à jour de Team Foundation Service
MechCommander 2 sur Windows 8
Entity Framework 5 Release Candidate e...
Cliquez pour lire la suite de l'article par richardc REACTIVE EXTENSIONS : CONSOMMER DES SERVICES AVEC RX PARTIE 3, LES PIèGES à éVITERREACTIVE EXTENSIONS : CONSOMMER DES SERVICES AVEC RX PARTIE 3, LES PIèGES à éVITER par Groc
Une mauvaise utilisation de rx lors de l'écriture d'une couche d'accès à des services peut conduire à des cas embarassants avec des erreurs mal gérées, des appels qui ne partent lorsqu'ils le devraient, et même des résultats incorrects . le tout nuis...
Cliquez pour lire la suite de l'article par Groc
Forum
 UTILISER UN .JSUTILISER UN .JS par zaikoe
Cliquez pour lire la suite par zaikoe
Logiciels
 sDEVIS-FACTURES vlPRO (8.1.0.3)SDEVIS-FACTURES VLPRO (8.1.0.3)sDEVIS-FACTURES vlPRO a été mis au point pour les particuliers, créateurs, entrepreneurs, artisa... Cliquez pour télécharger sDEVIS-FACTURES vlPRO 974 Application Server (12.2.4.6)974 APPLICATION SERVER (12.2.4.6)Développez de puissantes applications dans un environnement de 'cloud computing', clusterisé, séc... Cliquez pour télécharger 974 Application Server vPicture (1.4.2.1)VPICTURE (1.4.2.1)Avec vPicture, hébergez vos images facilement et rapidement.
vPicture est un utilitaire simple, ... Cliquez pour télécharger vPicture Easy-Planning (2.2.1.6)EASY-PLANNING (2.2.1.6)Easy-Planning permet de créer des plannings sous la représentation de diagrammes et est adapté au... Cliquez pour télécharger Easy-Planning COM-BACKUP (2.0)COM-BACKUP (2.0)
COM-BACKUP est un logiciel de sauvegarde qui permet de planifier les sauvegardes de vos dossiers ...
Cliquez pour télécharger COM-BACKUP
|