Discussion :

[vince29]

Bonjour à tous,

Voilà, j'ai un cas très simple d'utilisation javascript, qui fonctionne en partie, mais je ne comprend pas pourquoi ça ne fonctionne pas jusqu'au bout.

Voilà, je précise, je travaille en environnement Zend, au cas ou...

j'ai créé la fonction suivante sur mon formulaire :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
function controlForm(){
 
	if (document.getElementById('pays').value == "" ) {
		document.getElementById('pays-label').style.color='red';
      	document.forms['monForm'].pays.focus(); 
      	document.getElementById('data-label').style.color='red';
      	alert('test affichage');
      	return false;
    } else {
      	document.getElementById('pays-label').style.color='#9C9E9F';
    } 	
}

Lorsque je valide mon formulaire 'monForm', mon message 'Test affichage' apparaît correctement à l'écran, de même que la mise en rouge des label demandés, mais il valide tout de même le formulaire, et donc je suis redirigé vers la page paramétrée dans l'attribut "action" de mon formulaire...

Quelqu'un pourrait-il me dire pourquoi malgré le "return false", l'action de mon formulaire s'exécute ?

Merci.

Vince

[Bovino]

Quelqu'un pourrait-il me dire pourquoi malgré le "return false", l'action de mon formulaire s'exécute ?

Non, pas tant qu'on aura pas vu comment cette fonction est appelée !

Ceci dit, une piste probable.
Lorsque tu écris par exemple

Code html :

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

<form onsubmit="controlForm()">

cela va créer une fonction anonyme qui elle appellera controlForm(), un peu comme si tu avais

Code :

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

1
2
3
HTMLFormElement.onsubmit = function(){
    controlForm();
}

ce qui fait que le return de ta fonction de contrôle est renvoyé à la fonction anonyme, qui elle ne renvoie rien.
Il faut donc écrire :

Code html :

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

<form onsubmit="return controlForm()">

pour que cette fonction anonyme renvoie un résultat qui inhibera (ou non) le comportement par défaut.

[vince29]

autant pour moi pour le manque d'info.

mon script est appelé sur le bouton du formulaire :

Code :

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

<input type="submit" name="payer" onClick="controlForm();" class="formulaireSubmit" value="Payer" tabindex="" />

[Golgotha]

Je pense que la réponse a été formulée par Bovino dans le message d'avant

[g.randaxhe]

Hello !

Je pense que tu devrais faire comme ceci :

Code :

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

<input type="button" name="payer" onClick="controlForm();" class="formulaireSubmit" value="Payer" tabindex="" />

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
function controlForm(){
 
	if (document.getElementById('pays').value == "" ) {
		document.getElementById('pays-label').style.color='red';
      	document.forms['monForm'].pays.focus(); 
      	document.getElementById('data-label').style.color='red';
      	alert('test affichage');
      	return false;
    } else {
      	document.getElementById('pays-label').style.color='#9C9E9F';
        document.forms['monForm'].submit();
    } 	
}

[SpaceFrog]

Je pense que Beef à tout dit :

Code :

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

<form onsubmit="return controlForm()">

en résumé pas de onclick sur le bouton submit, mais un onsubmit dans la balise form ...