la page reload apres function [Résolu]

[cels]

Bonjour,

je suis sur un formulaire de creation de groupe. La creation comprend 4 etapes, que je dispose sur 4 pages pour que l'utilisateur puisse finir la creation a la fin de chaque etape. Donc dans ma premiere page, je demande juste un nom et une description du groupe. A la fin de mon form, j'ai donc un bouton 'Finish' pour sauver le groupe avec seulement ces informations, et un bouton 'Proceed to populate the group' pour aller vers l'etape suivante de population du groupe.

J'ai cree une fonction pour chaque bouton, qui onclick fait d'abord tourner une fonction validateFields pour checker que les champs sont remplis correctement, puis qui met a jour la valeur de l'attribut action de mon form, puis qui submit mon form. Tout semble bien fonctionner, a ceci pres que quand je clique, la page recharge. Mes messages d'erreur si il y a apparaissent et disparaissent directement, ainsi que mes champs, car la page recharge (enfin je pense, suis a peu pres sur).

Voici mon 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
var RE_group_name=/^[a-zA-z0-9- _$%^&@#'"!()+*{}[]<>]{3,200}$/;
	var RE_group_desc=/^[a-zA-z0-9- _$%^&@#'"!()+*{}[]<>]{3,500}$/;
 
	function validateFields(){
		var errorOn=0;
		$('#workingspace').html("");
		if($('#group_name').val()==''){
			$('#workingspace').html('<div id="error">Providing a group group name is mandatory.</div>');
			alert('le nom du groupe est vide');
			errorOn=1;
		}else{
			temp = $('#group_name').val();
			errorOn=0;
			if(!(RE_group_name.test(temp))){ $('#workingspace').html('<div id="error">You must provide a valid group name, 3 to 200 characters, no special characters.</div>'); errorOn=1;}
			temp = $('#group_name').val();
			if(!(RE_group_desc.test(temp))){ 
				if(errorOn==1){$('#error').append("<br>You must provide a valid last name, 2 to 20 characters, no special characters.<br>");}
				else{$('#workingspace').html('<div id="error">You must provide a valid group desc, 3 to 500 characters.</div>'); errorOn=1;}
			}
			alert('le nom du groupe n\'est pas vide');
		}
		if(errorOn==1){ return false;}else{ return true;}
	};

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$(document).ready(function() {
	$('#savegroup').click(function(){
		if(validateFields()){
			$('#addgroup1').attr({action:'addgroup1php.php?act=finish'});
			$('#addgroup1').submit();
		}
	});
 
	$('#togroup2').click(function(){
		if(validateFields()){
			$('#addgroup1').attr({action:'addgroup1php.php?act=proceed'});
			$('#addgroup1').submit();
		}
	});
});

Si qq'un pouvait m'eclairer, merci d'avance.

Cyril

[SpaceFrog]

Tout semble bien fonctionner, a ceci pres que quand je clique, la page recharge.

Code :

$('#addgroup1').submit();

Heu et ça t'étonne ????

[cels]

lol

oui alors non. En fait la j'ai vire les commentaires parce que je voulais que le code soit tel quel, car je le modifie pas mal quand je teste.

Le probleme n'est pas la. Quand il n'y a pas d'erreur, comme tu le soulignes, quand on tombe sur le submit on est bien redirige.

Le probleme est quand il y a erreur de saisie, le validateFields renvoit false (donc pas de submit), et bien la on n'est pas redirige (c'est normal), mais c'est la page courante qui recharge.

Merci en tout cas pour l'intention.

Cyril

[SpaceFrog]

elle return false certes ...
mais où ?

tu as quoi dans le onsubmit du form ?

il serait préférable de mettre plutot un preventDefault() si tes boutons sont des submit

Et pour repondre de façon eficace il manque le code html associé, surtout au niveau des evenement de la balise form et des boutons ...

[cels]

Salut,

merci pour tes reponses, je ne sais pas comment utiliser le preventDefault(), mais ca m'a mis sur la voie. En fait tu as raison, par default le form submit si la fonction ne renvoit pas false. J'ai donc juste modifie la fonction pour qu'elle renvoit false si le formulaire ne doit pas etre submitted.

Voila, c'est resolu, merci !

Cyril