onsubmit avec trois fonctions

**silent_murder** · 10/05/2010, 20h49

Bonjour,

J'ai un soucis javascript. J'ai créé un tableau html avec des champs de texte dans chaque cellule (tableau généré en js à l'aide de deux champs de texte un pour les colonnes l'autre pour les lignes).
Dans ce tableau le header contient les quantités (produits) la colonne de gauche les valeurs (type de produit). Le reste sont les champs de texte correspondant au prix (q/valeur).
J'arrive à créer sans soucis ce tableau.

le problème se pose lors du fameux onsubmit. J'ai trois fonctions de contrôle de champs, une pour chaque type (quantité,valeur,prix).

Lorsque je mets les trois fonctions ensembles, cela me créer "une fin du monde" la soumission ne marche que pour une partie (ex:seulement la quantité) voire deux mais pas trois

Ce que je voudrais c'est si un champs de n'importe quelle partie n"est pas rempli la soumission soit avortée, bien sûr si un ou plusieurs champs des trois ne sont pas remplis la soumission ne pas non plus.

Voici les fonctions de contrôle :

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
function verifQ()
{ 
	var c =document.getElementById("col").value;	
	for(var i=2;i<=c;i++)
	{
 
		if (document.getElementById("Q"+i).value=="")
		{
			 return false;
		}		
	}
 
}
 
 
function vP()
{
	var col =parseInt(document.getElementById("col").value);
	var ligne =parseInt(document.getElementById("ligne").value);
	var cell=(col*ligne);
	var d = (col+2);
	var z=0; 
	for(var t=d;t<=cell;t++)
	{
		z++;			
 
		if(z%(col)==0)
		{
			z=0;t=t+1;	
		}
		if(document.getElementById("P"+t).value=="")
		{
			alert(2);
			return false; 				
		}
	}				
}
 
function verV()
{
	var lig =parseInt(document.getElementById("ligne").value);
	for(var n=1;n<=lig;n++)
	{
		if(document.getElementById("V"+n).value=="")
		{
			alert(1);
			return false;
			break;
		}
 
	}
 
}

voici le formulaire:

Code :

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

<form name="attributes" action="<?php echo tep_href_link(FILENAME_PRODUCTS_ATTRIBUTES, 'action=' . $form_action . '&option_page=' . $option_page . '&value_page=' . $value_page . '&attribute_page=' . $attribute_page); ?>" method="post" onsubmit="return(verifQ() && verV() && vP());">

J'ai essayé de bien résumer, dites moi si ce n'est pas clair.

PS: ne critiquez pas trop le code je débute dans la profession, sinon je vais débuter dans la dépression

**SpaceFrog** · 10/05/2010, 22h28

Pourquoi ne pas tout faire en une seule et même fonction de vérification ?

Sinon c'est bien de faire le return false quand c'est pas bon, mais:
1/ un return fait quitter la fonction
2/ faut pas oublier le return true quand c'est bon

ex:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function verifQ()
{ 
	var c =document.getElementById("col").value;	
        var ok=0
	for(var i=2;i<=c;i++)
	{
		if (document.getElementById("Q"+i).value=="")
		{
		  ok++;
		}		
	}
        return (ok==0);
 
}

**silent_murder** · 10/05/2010, 23h15

J'ai tenté en une fonction que voici :

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
function verif()
{ 
	var ok=0;
	var c =document.getElementById("col").value;	
	for(var i=2;i<=c;i++)
	{
 
		if (document.getElementById("Q"+i).value=="")
		{
			 ok++;
 
		}		
	}
 
 
	var col =parseInt(document.getElementById("col").value);
	var ligne =parseInt(document.getElementById("ligne").value);
	var cell=(col*ligne);
	var d = (col+2);
	var a=0; 
 
 
	for(var t=d;t<=cell;t++)
	{
		a++;			
 
		if(a%(col)==0)
		{
			a=0;
			t=t+1;	
		}
		if(document.getElementById("P"+t).value=="")
		{
			alert(document.getElementById("P"+t).name); 
			ok++;
 
		}
	}
 
	var ok2=0;
	var lig =parseInt(document.getElementById("ligne").value);
 
	for(var n=1;n<=lig;n++)
	{
		alert(1);
		if(document.getElementById("V"+n).value=="")
		{
			ok++;
 
 
 
		}
 
	}	
 
	return(ok==0);	
 
}

Cela ne marche absolument pas, lors du click la deuxième boucle fait le tour de tous ses champs vides jusqu'à valider le formulaire

, la troisième boucle quant à elle ne s'enclenche pas

**silent_murder** · 11/05/2010, 10h15

Bon je viens de changer une partie du 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
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
function verif()
{ 
	var ok=0;
	var col =parseInt(document.getElementById("col").value);
	var ligne =parseInt(document.getElementById("ligne").value);
	var cell=(col*ligne);
	var d = (col+2);
	var a=0; 
 
	for(var i=2;i<=col;i++)
	{
 
		if (document.getElementById("Q"+i).value=="")
		{
			 ok=ok+1; alert(3);
			 break;
		}		
	}
 
	for(var t=d;t<=cell;t++)
	{
		a++;			
 
		if(a%(col)==0)
		{
			a=0;
			t=t+1;	
		}
		if(document.getElementById("P"+t).value=="")
		{
			//	alert(document.getElementById("P"+t).name);  
			ok=ok+1; alert(2);
			break;				
		}
	}
 
 
	for(var n=1;n<=ligne;n++)
	{
 
		if(document.getElementById("V"+n).value=="")
		{
			ok=ok+1;alert(1);
			break;						
		}
 
	}	
 
	if(ok==0)
	{
		return true;
 
	}
	else
	{
		return false;	
 
	}
 
}

Toutes les boucles fonctionnent, déjà ça mais le formulaire se valide s'il n'y a pas de champs vide dans la première et troisième boucle alors que la deuxième boucle fait ok=ok+1; Le pire si je mets return false dans le if et dans le else le formulaire est quand même envoyé dans le cas prédemment expliqué.

Merci de m'aider ça me saoule.

Ps: dsl pour les admins je connaissais pas la balise code, je sais c'est chiant un n00b.

**vermine** · 11/05/2010, 10h39

Bonjour,

Vous avez toujours bien le return dans le submit ?

Code :

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

1
2
 
onsubmit="return verif();">

**silent_murder** · 11/05/2010, 10h41

Envoyé par vermine

Bonjour,

Vous avez toujours bien le return dans le submit ?

Code :

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

1
2
 
onsubmit="return verif();">

Oui

**vermine** · 11/05/2010, 10h47

En enlevant les break, et en faisant une alert sur "ok" après chaque boucles, ça donne quoi ?

**silent_murder** · 11/05/2010, 10h58

Envoyé par vermine

En enlevant les break, et en faisant une alert sur "ok" après chaque boucles, ça donne quoi ?

ça donne une boucle infernale de messages d'alerte qui finissent par envoyer le formulaire

Voilà j'ai détruit la moitié de l'humanité.

**vermine** · 11/05/2010, 11h00

Oui, j'aurais du préciser d'enlever les alert dans les boucles. Il ne faut que 3 voire une seule alert sur "ok", avant le if final.

**silent_murder** · 11/05/2010, 11h08

Sans les breaks le formulaire se valide.

Je joins la fonction de création du tableau (c'est un peu costaud)

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
function tab()
{
if(document.getElementById('option').options[document.getElementById('option').selectedIndex].text=="")
{
	document.getElementById('erreur').style.color="red";
	document.getElementById('erreur').innerHTML="Choisissez une option";
}
else if(document.getElementById('designation').options[document.getElementById('designation').selectedIndex].text=="")
{
	document.getElementById('erreur').style.color="red";
	document.getElementById('erreur').innerHTML="Choisissez une désignation";
}
else
{
	document.getElementById('erreur').innerHTML="";
	document.getElementById('erreur').innerHTML="";
	document.getElementById("ligne").disabled=true;
	document.getElementById("col").disabled=true;
	var ligne=document.getElementById("ligne").value;
	var col=document.getElementById("col").value;
	var z=0;
	for(var i=0;i<ligne;i++)
	{
 
 
		var row = document.getElementById('T1').insertRow(-1);
		for(var t=0;t<col;t++)	
		{	
			z++;
			var cell = row.insertCell(t);
			if(i==0 && t==0)
			{
 
				cell.innerHTML=document.getElementById('option').options[document.getElementById('option').selectedIndex].text+" Quantité";
 
			}
 
 
			else if(i==0 && t>0)
			{
				var ch,c2;
				ch=document.createElement('input');
				c2=cell.getElementsByTagName('input');
				ch.id="Q"+z;			
				ch.setAttribute('type','text');			
				ch.setAttribute('name','Q[]');
				cell.appendChild(ch); 
			}
 
			else if(i>0 && t==0)
			{	
 
				var ch,c2;
				ch=document.createElement('input');
				c2=cell.getElementsByTagName('input');			
				ch.id="V"+i;			
				ch.setAttribute('type','text');			
				ch.setAttribute('name','V[]'); 
				cell.appendChild(ch);	
			}
			else
			{
				var ch,c2;
				ch=document.createElement('input');
				c2=cell.getElementsByTagName('input');			
				ch.id="P"+z;			
				ch.setAttribute('type','text');			
				ch.setAttribute('name','P[]'); 
				cell.appendChild(ch);
 
			}								
	}
}
}
 
}

**vermine** · 11/05/2010, 11h52

Le code HTML généré sera plus util.

**silent_murder** · 11/05/2010, 12h01

Envoyé par vermine

Le code HTML généré sera plus util.

C'est à dire ?

**SpaceFrog** · 11/05/2010, 12h23

Essaye déja avec un tableau en dur, pas avec des éléments inputs générés dynamiquement...

j'ai bien peur que

Code :

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

ch.setAttribute('name','Q[]');

pose souci...
sous IE l'attribution du name en runtime n'est à priori pas possible

**silent_murder** · 11/05/2010, 12h28

Envoyé par SpaceFrog

Essaye déja avec un tableau en dur, pas avec des éléments inputs générés dynamiquement...

j'ai bien peur que

Code :

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

ch.setAttribute('name','Q[]');

pose souci...
sous IE l'attribution du name en runtime n'est à priori pas possible

si l'attribution des noms marchent, j'ai testé comme indiqué sur vos tutos.

alert(document.getElementbyId('Q'+z).name); ça passe.

**SpaceFrog** · 11/05/2010, 12h30

oui coté javascript ...
pas sur que tu recupères tes inputs coté serveur, mais c'est un autre problème

As tu testé ta fonction de verification avec un tableau en dur ?

**silent_murder** · 11/05/2010, 12h36

Envoyé par SpaceFrog

oui coté javascript ...
pas sur que tu recupères tes inputs coté serveur, mais c'est un autre problème

As tu testé ta fonction de verification avec un tableau en dur ?

Non je l'ai pas testé avec un tableau en dure (oui traitez moi de n00b immonde)

**SpaceFrog** · 11/05/2010, 13h12

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
78
79
80
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Nouvelle page 1</title>
<style type='text/css'>
 fieldset {
 width : 100px;
 float:left;
 }
 </style>
<script type='text/javascript'>
function verif(){ 
	var ok=0;
	for(var i=0;i<=7;i++){
			if (document.getElementById("Q"+i).value==""){
			 ok++;
			}
	}		
 
	for(var t=0;t<=7;t++)	{
		if(document.getElementById("P"+t).value=="")
		{
			ok++;
		}
	}				
	for(var n=0;n<=7;n++)
	{
		if(document.getElementById("V"+n).value=="")
		{
		ok++;
			}
	}
 
 return ok==0
}
</script>
</head>
 
<body>
<form action="javascript:alert('envoyé')" onsubmit="return verif()" >
<fieldset>
<legend>les Q</legend>
<input type="text" id="Q0" /><br/>
<input type="text" id="Q1" /><br/>
<input type="text" id="Q2" /><br/>
<input type="text" id="Q3" /><br/>
<input type="text" id="Q4" /><br/>
<input type="text" id="Q5" /><br/>
<input type="text" id="Q6" /><br/>
<input type="text" id="Q7" /><br/>
</fieldset>
 
<fieldset>
<legend>les P</legend>
<input type="text" id="P0" /><br/>
<input type="text" id="P1" /><br/>
<input type="text" id="P2" /><br/>
<input type="text" id="P3" /><br/>
<input type="text" id="P4" /><br/>
<input type="text" id="P5" /><br/>
<input type="text" id="P6" /><br/>
<input type="text" id="P7" /><br/>
</fieldset>
 
<fieldset>
<legend>les V</legend>
<input type="text" id="V0" /><br/>
<input type="text" id="V1" /><br/>
<input type="text" id="V2" /><br/>
<input type="text" id="V3" /><br/>
<input type="text" id="V4" /><br/>
<input type="text" id="V5" /><br/>
<input type="text" id="V6" /><br/>
<input type="text" id="V7" /><br/>
</fieldset>
<input type="submit" value="envoyer" />
</form>
</body>
 
</html>

**silent_murder** · 11/05/2010, 14h19

Bon je viens de faire en dure ce que je obtenir à la volée

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
<table border="1" summary="" width="80%" cellspacing="0" cellpadding="2"  algin="left">
<tr>
<td>
</td>
<td>
<input type="text" id="Q2" />
</td>
<td>
<input type="text" id="Q3" />
</td>
<td>
<input type="text" id="Q4" />
</td>
<td>
<input type="text" id="Q5" />
</td>
</tr>
<tr>
<td>
<input type="text" id="V1" />
</td>
<td><input type="text" id="P7" />
</td>
<td><input type="text" id="P8" />
</td>
<td><input type="text" id="P9" />
</td>
<td><input type="text" id="P10" />
</td>
</tr>
<tr>
<td>
<input type="text" id="V2" />
</td>
<td><input type="text" id="P12" />
</td>
<td><input type="text" id="P13" />
</td>
<td><input type="text" id="P14" />
</td>
<td><input type="text" id="P15" />
</td>
</tr>
<tr>
<td>
<input type="text" id="V3" />
</td>
<td><input type="text" id="P17" />
</td>
<td><input type="text" id="P18" />
</td>
<td><input type="text" id="P19" />
</td>
<td><input type="text" id="P20" />
</td>
</tr>
</table>

voici le javascript :

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
function verif()
{ 
	var ok=0;
//	var col =parseInt(document.getElementById("col").value);
//	var ligne =parseInt(document.getElementById("ligne").value);
	var col =5;
	var ligne =4;
	var cell=(col*ligne);
	var d = (col+2);
	var a=0; 
 
	for(var i=2;i<=col;i++)
	{
 
		if (document.getElementById("Q"+i).value=="")
		{
			 alert(ok);
			 ok++; 
		}		
	}
 
	for(var t=d;t<=cell;t++)
	{
		a++;			
 
		if(a%(col)==0)
		{
			a=0;
			t=t+1;	
		}
		if(document.getElementById("P"+t).value=="")
		{
			alert(ok);	
			ok++; 			
		}
	}
 
 
	for(var n=1;n<ligne;n++)
	{
 
		if(document.getElementById("V"+n).value=="")
		{
			alert(ok);
			ok++;						
		}
 
	}	
 
	if(ok==0)
	{
		alert(ok);
		return true;
 
	}
	else
	{
		alert(ok);
		return false;	
 
	}
 
}

Cela plante bien sûr, la dernière alert est le nombre 11 puis le formulaire se valide. Le code me paraît bon pourtant.

J'ai mis ces codages sur une page html vierge et une erreur apparait document.getElementById('P'+t) is null selon webdev

**SpaceFrog** · 11/05/2010, 15h02

et le form il est où ?
au lieu de nous donner ton code à la petite semaine ...colle nous ton code complet la version de test en dur ???

Le code donné au dessus fonctionne c'est donc que tu dois avoir un souci avec le html du form

**silent_murder** · 11/05/2010, 15h03

Bon problème résolu merci SpaceFrog et vermine, cela marche à la volée.
Donc lors de la création j'ai concaténé un P avec un nombre qui s'incrémente que lorsqu'il y a la condition de réalisation de p.

P'tain c'était pas trop compliqué, bordel d'analyse loupé j'ai voulu faire trop compliqué.

au lieu de nous donner ton code à la petite semaine

Désolé d'avoir été un n00b dégueulasse j'ai pas l'habitude de ce genre de forum.
J'ai voulu bien faire, l'enfer est pavé de bonnes intentions...

onsubmit avec trois fonctions

JavaScript

Discussions similaires

Partager

Partager