fonction javascript dans formulaire html

**bumrush09** · 25/05/2009, 12h59

rebonjour, edit ce n'est pas un formualire en "GET" mais en "POST"
j'ai un probleme avec des fonctions javascripts qui permettent de modifier dynamiquement le contenu de champ textbox, elle fonctionnent seulement si je retire la balise du formulaire, meme un "alert".
sinon l'erreur est :"cet objet ne gère pas cette méthode..."
voici un petit bout de code :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script>
function quantite_frais(link)
{
 val_quantite_frais=link.value;
 document.forms[0].getElementById('montant_total_frais').value=(val_montant_frais*val_quantite_frais)+((val_montant_frais*val_quantite_frais)*val_marge_frais);
}
</script>
 
echo'<form name="modif" method="POST" action="#">';
 
echo'<td><input type="text" class="textbox" name="quantite_frais"  onchange="quantite_'.$table.'(this)" value="'.$valeur["quantite"].'"/></td>';
 
 echo'<td><input type="text"  class="textbox" name="montant_frais"  value="'.$valeur["montant"].'" onchange="montant_'.$table.'(this)"/></td>';
 
 echo'<td><input type="text"  class="textbox"name="marge_frais" value="'.$valeur["marge"].'" onchange="marge_'.$table.'(this)"/></td>';
 
 echo'<td><input type="text"  class="textbox" name="montant_total_frais'" readonly="true" value="'.$valeur["montant_total"].'" /></td>';

je ne comprend pas car j'ai déjà utiliser cette méthode et cela fonctionner.

merci d'avance pour vos réponse.

**Bovino** · 25/05/2009, 13h35

getElementById est une méthode de l'objet document uniquement, tu ne peux donc pas l'appeler sur un formulaire.
De plus, comme son nom l'indique, elle recherche un élément par son attribut id (unique dans la page), or ton input n'a pas d'id.

**bumrush09** · 25/05/2009, 14h24

c'est vrai, mais j'utilise le "getelementbyid()"pour le test sans formulaire qui fonctionne,
pour le formulaire j'avais tester en tulisant le tableau des formulaires de la page "forms[]" mais même avec un simple alert il y a une erreur.

le probleme vient de la déclaration du formulaire, ou de son tuilisation mais je ne vois pas ou peut bien etre l'erreur?

**andry.aime** · 25/05/2009, 14h35

Salut,

Code :

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

1
2
3
4
5
6
7
<script type="text/javascript">
function quantite_frais(link)
{
 val_quantite_frais=link.value;
 document.forms[0].elements['montant_total_frais'].value=(val_montant_frais*val_quantite_frais)+((val_montant_frais*val_quantite_frais)*val_marge_frais);
}
</script>

Ou

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script type="text/javascript">
function quantite_frais(link)
{
 var val_quantite_frais=link.value;
 document.getElementById('montant_total_frais').value=(val_montant_frais * val_quantite_frais)+((val_montant_frais*val_quantite_frais)*val_marge_frais);
}
</script>
 
echo'<form name="modif" method="POST" action="#">';
 
echo'<td><input type="text" class="textbox" name="quantite_frais"  id="quantite_frais" onchange="quantite_'.$table.'(this)" value="'.$valeur["quantite"].'"/></td>';
 
 echo'<td><input type="text"  class="textbox" name="montant_frais"  id="montant_frais" value="'.$valeur["montant"].'" onchange="montant_'.$table.'(this)"/></td>';
 
 echo'<td><input type="text"  class="textbox" name="marge_frais" id="marge_frais" value="'.$valeur["marge"].'" onchange="marge_'.$table.'(this)"/></td>';
 
 echo'<td><input type="text"  class="textbox" name="montant_total_frais"  id="montant_total_frais" readonly="true" value="'.$valeur["montant_total"].'" /></td>';

Les variables 'val_montant_frais' et 'val_marge_frais' sont-elles déjà déclarées ailleurs?

**bumrush09** · 25/05/2009, 14h47

oui elle le sont tes réponses sont pertinentes il faut que je fasse une mise à jour
la fonction ne fonctionne pas meme lorsqu'elle ne contient qu'un simple "alert()"
il suffit de retirer la balise form ca fonctionne.
étrange?

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<script type="text/javascript">
function quantite_frais(link)
{
 alert("fonction javascript");
}
</script>
 
echo'<form name="modif" method="POST" action="#">';
 
echo'<td><input type="text" class="textbox" name="quantite_frais"  onchange="quantite_'.$table.'(this)" value="'.$valeur["quantite"].'"/></td>';
 
 echo'<td><input type="text"  class="textbox" name="montant_frais"  value="'.$valeur["montant"].'" onchange="montant_'.$table.'(this)"/></td>';
 
 echo'<td><input type="text"  class="textbox"name="marge_frais" value="'.$valeur["marge"].'" onchange="marge_'.$table.'(this)"/></td>';
 
 echo'<td><input type="text"  class="textbox" name="montant_total_frais'" readonly="true" value="'.$valeur["montant_total"].'" /></td>';
 
echo'</table>';
		echo'<input type="submit" class="bouton_formulaire" name="modifier_detail_devis" value="valider"/>';
	echo'</form>';

**andry.aime** · 25/05/2009, 14h53

Donne nous le code HTML généré car je doute que l'erreur vient de

onchange="quantite_'.$table.'(this)"

c'est à dire que la valeur de $table peut être différent de "_frais" ansi la fonction n'est pas trouvée.

**bumrush09** · 25/05/2009, 15h37

voici la partie de code généré d'abbord avec le formulaire (fonctionne pas)

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<script type="text/javascript">
/***** frais *****/ 
 
//fonction mise à jour var globale quantité frais
function quantite_frais(link)
{
 alert("fonction javascript");
 //val_quantite_frais=link.value;
 //document.getElementById('montant_total_frais').value=(val_montant_frais*val_quantite_frais)+((val_montant_frais*val_quantite_frais)*val_marge_frais);
} 
 
//fonction mise à jour var globale marge frais
function marge_frais(link)
{
 //var val_marge_frais=link.value;
 //document.getElementById('montant_total_frais').value=(val_montant_frais*val_quantite_frais)+((val_montant_frais*val_quantite_frais)*val_marge_frais);
} 
 
// mise à jour var globale identifie nature frais choisie
function nature_frais(link)
{
 /*var val_nature_frais=link.selectedIndex;
 if(val_nature_frais==0)
 {
  val_montant_frais=taux_km_devis_utilisateur;
  document.getElementById('montant_frais').value=taux_km_devis_utilisateur;
  document.getElementById('montant_total_frais').value=(val_montant_frais*val_quantite_frais)+((val_montant_frais*val_quantite_frais)*val_marge_frais);
 }
 else
 {
  val_montant_frais=taux_frais[val_nature_frais];
  document.getElementById('montant_frais').value=taux_frais[val_nature_frais];
  document.getElementById('montant_total_frais').value=(val_montant_frais*val_quantite_frais)+((val_montant_frais*val_quantite_frais)*val_marge_frais);
 }*/
} 
 
//fonction écriture montant frais
function montant_frais(link)
{
 //val_montant_frais=link.value;
 //document.getElementById('montant_total_frais').value=(val_montant_frais*val_quantite_frais)+((val_montant_frais*val_quantite_frais)*val_marge_frais);
 
} 
 
 
/***** variable frais *****/
 var val_nature_frais=0;
var val_quantite_frais=1;
var val_marge_frais=0.2;
var val_montant_frais=2;
//tableau des taux frais récupère résultat requête php en tête
var  taux_frais = new Array();
var taux_frais=["0.355","40","50"]; 
 
var taux_km_devis_utilisateur=0.6;
</script>
<h2> Détail Frais</h2> 
 
<table id="resultat">
<tr><th><b><u>rang</u></b></th><th><b><u>nature frais</u></b></th><th><b><u>Désignation</u></b></th><th><b><u>quantite</u></b></th><th><b><u>montant</u></b></th><th><b><u>marge</u></b></th><th><b><u>montant total</u></b></th><th><b><u>valide</u></b></th><th><b><u>modifier</u></b></th></tr>
<tr><td>0</td><td>REPAS</td><td>test 3</td><td>12</td><td>40 €</td><td>0.2</td><td>480 €</td><td>0</td><td><a href="index.php?pageref=devis_detail_frais&id_devis=1&devis_detail_action=modifier19">modifier</td></tr>
</table>
<h2>Modifier</h2><form name="modif" method="POST" action="#">
<table class="saisie2">
<tr><th>Rang</th><th>NatureFrais</th><th>Designation</th><th>Quantité</th>
<th>Montant</th><th>Marge</th><th>MontantTotal</th><th>Valide</th><th></th></tr>
<tr><td><input  type="text" class="textbox" name="rang_frais" value="0" /></td>
<td><select name="nature_frais" class="textbox" onclick="nature_frais(this)">
   <option value='KM'>KM</option><option  selected  value='REPAS'>REPAS</option>
   <option value='HOTEL'>HOTEL</option></select></td>
<td><input type="text" class="textbox" name="designation_frais" value="test 3"/></td>
<td><input type="text" class="textbox" name="quantite_frais"  onchange="quantite_frais(this)" value="12"/></td>
<td><input type="text"  class="textbox" name="montant_frais"  value="40" onchange="montant_frais(this)"/></td>
<td><input type="text"  class="textbox"name="marge_frais" value="0.2" onchange="marge_frais(this)"/></td>
<td><input type="text"  class="textbox" name="montant_total_frais" readonly="true" value="480" /></td>
<td><input type="text" class="textbox" size="1" MAXLENGTH="1" name="valide_frais" value="0"  /></td></tr></table>
<input type="submit" class="bouton_formulaire" name="modifier_detail_devis" value="valider"/></form>

puis le code sans formulaire qui fonctionne (juste la partie modifier

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<h2>Modifier</h2><table class="saisie2"><tr>
<th>Rang</th><th>NatureFrais</th><th>Designation</th><th>Quantité</th><th>Montant</th><th>Marge</th>
<th>Montant Total</th><th>Valide</th><th></th></tr>
<tr><td><input  type="text" class="textbox" name="rang_frais" value="0" /></td>
<td><select name="nature_frais" class="textbox" onclick="nature_frais(this)">
   <option value='KM'>KM</option><option  selected  value='REPAS'>REPAS</option>
   <option value='HOTEL'>HOTEL</option></select></td>
   <td><input type="text" class="textbox" name="designation_frais" value="test 3"/></td>
<td><input type="text" class="textbox" name="quantite_frais"  onchange="quantite_frais(this)" value="12"/></td>
<td><input type="text"  class="textbox" name="montant_frais"  value="40" onchange="montant_frais(this)"/></td>
<td><input type="text"  class="textbox"name="marge_frais" value="0.2" onchange="marge_frais(this)"/></td>
<td><input type="text"  class="textbox" name="montant_total_frais" readonly="true" value="480" /></td>
<td><input type="text" class="textbox" size="1" MAXLENGTH="1" name="valide_frais" value="0"  /></td>
</tr></table>

je trouve ca louche car meme en changeant le nom du formulaire rien n'y fait et (link) en javascript fonctionne bien dans d'autre page

**andry.aime** · 25/05/2009, 15h52

Mets les code JS dans la balise head du fichier.
La fonction affectée à onchange ne s'execute que si le champ a été modifié lorsqu'on quitte le champ.
Sinon, utilise onblur pour executer la fonction quand tu quittes le champ ou onkeyup pour l'executée à chaque appuie d'une touche.

**bumrush09** · 25/05/2009, 16h14

oui le onchange c'est pas grave
par contre j'ai essayé de mettre le script dans le <head> il me donne exactement la même erreur c'est pas logique
seul la balise <form> lui fait ne pas reconnaître les fonctions déclarés

**bumrush09** · 25/05/2009, 16h58

ok la solution m'a été donné pour ceux que ça interesse :
le problème venait des noms de "fonctions javscript" appelé qui avait le meme nom que les champ "input text".

merci pour votre aide.

fonction javascript dans formulaire html

JavaScript

Vue hybride

Discussions similaires

Partager

Partager