[Prototype] formulaire ajax prototype [Résolu]

[Hesiode]

Bonjour,

Depuis plusieurs heures je cherche un problème, je ne voulais pas en arriver à poster sur ce forum mais là je n'en peux plus

Voici mon code condensé :

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
 
<div id="contentWrapper">
<form id="inscription" class="niceform">
<fieldset>
<legend>Inscription</legend>
<div class="form-row">
	<div class="field-label"><label for="login">Login :</label></div>
	<div class="field-widget"><input type="text" name="login" id="login" maxlength="20" size="20" class="required" title="Entrez votre login"/></div>
</div>
</fieldset>
<div class="buttons">
	<button  class="positive">
		<img src="/images/tick.png" alt=""/>
		S inscrire
	</button>
</div>
<input type="hidden" name="page" value="<?=$page;?>">
 
</form>
</div>
 
<div id="retour"></div>
 
<script type="text/javascript">
 
	function ValidateForm(result,form){
		if(result){
			//new Ajax.Updater('retour','/ajax/inscription.php',{ onComplete:alert('ok'), onFailure:alert('false'), onSuccess:alert('success')});
			new Ajax.Updater('retour', 'ajax/inscription.php', {onComplete:function(){ new Effect.Highlight('retour');},asynchronous:true});
			//new Ajax.Updater('retour', 'inscription.php', {asynchronous:true});
 
		}
	}
 
	var valid = new Validation('inscription', {immediate : true, onFormValidate : ValidateForm});
 
	Validation.addAllThese([
		['validate-password', 'Your password must be more than 6 characters and not be \'password\' or the same as your name', {
			minLength : 1,
			notOneOf : ['password','PASSWORD','1234567','0123456'],
			notEqualToField : 'login'
		}],
		['validate-password-confirm', 'Your confirmation password does not match your first password, please try again.', {
			equalToField : 'mdp'
		}]
	]);
</script>

Plusieurs questions :
1/ je ne comprends pas pourquoi ma page se rafraichis
2/ je n'arrive pas à afficher ce qui se trouve dans inscription.php dans la div "retour"
(dans inscription.php il y a juste un echo "toto"

Merci infiniment

[dingoth]

La réponse à la question 1 est simple : tu n'utilises pas d'attribut ACTION="" dans ton <FORM> (par défaut, le navigateur remplace action="" par l'adresse de la page courante). De plus, par rapport à ça, tu valides bien le formulaire, en ne consommant pas l'événement. Le tout fait que le processus normal de l'envoi de données recharge ta page.

La solution à la 1 devrait faire en sorte que la 2 soit correcte

[Hesiode]

Effectivement, il fallait que j'ajoute un onsubmit="return false" dans la balise form.

Code :

<form id="inscription" class="niceform" onsubmit="return false">

Merci bien jeune ami.

EDIT : Et pour être complet, pour récupérer les variables du formulaire :

var params = Form.serialize($('inscription'));
new Ajax.Updater('contentWrapper', 'ajax/inscription.php', {onComplete:function(){ new Effect.Highlight('contentWrapper');},asynchronous:true,parameters:params});

ensuite dans la page php, il suffit de lire avec $_POST

En espérant que ça aide quelqu'un..