onsubmit avec trois fonctions

Version imprimable

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 :cry:
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:

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:

<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

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:

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); }

J'ai tenté en une fonction que voici :

Code:

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 8O, la troisième boucle quant à elle ne s'enclenche pas :(

Bon je viens de changer une partie du code
Code:

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.

11/05/2010, 10h39
vermine
Bonjour,

Vous avez toujours bien le return dans le submit ?
Code:

1 2 onsubmit="return verif();">
11/05/2010, 10h41
silent_murder
Citation:
Envoyé par vermine

Bonjour,

Vous avez toujours bien le return dans le submit ?

Code:

1 2 onsubmit="return verif();">
Oui :)
11/05/2010, 10h47
vermine

En enlevant les break, et en faisant une alert sur "ok" après chaque boucles, ça donne quoi ?
11/05/2010, 10h58
silent_murder

Citation:

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 :calim2: Voilà j'ai détruit la moitié de l'humanité.
11/05/2010, 11h00
vermine

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.

Sans les breaks le formulaire se valide.

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

Code:

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);
 
			}								
	}
}
}
 
}

11/05/2010, 11h52
vermine

Le code HTML généré sera plus util. :D
11/05/2010, 12h01
silent_murder

Citation:

Envoyé par vermine

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

C'est à dire ?
11/05/2010, 12h23
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:

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

pose souci...
sous IE l'attribution du name en runtime n'est à priori pas possible
11/05/2010, 12h28
silent_murder

Citation:

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:

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.
11/05/2010, 12h30
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 ?
11/05/2010, 12h36
silent_murder

Citation:

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)

Code:

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>

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

Code:

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:

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

11/05/2010, 15h02
SpaceFrog

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
11/05/2010, 15h03
silent_murder

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é.

Citation:

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...