Discussion :

[Invité]

Bonjour, je suis actuellement en train de développer un site et je me suis dit "Pourquoi ne pas utiliser AJAX pour vérifier les données de mon inscription ?" J'ai donc commencé mon code mais lors de l'envoie de mon formulaire, mon navigateur me redirige vers la page sensée traiter les données alors que je veux rester sur la même page et afficher l'erreur qui ne va pas.

Voici mon formulaire :

Code html :

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
<form method="POST" onsubmit="return false" action="includes/verifinscription/verification.php" id="insc_form" class="form-horizontal" style="margin:20px;">
	<div class="form-group" id="insc_pseudo">
	    <label for="pseudo" class="col-lg-2 control-label" style="width:200px;">Pseudonyme</label>
	    <div class="col-lg-6">
	      	<input type="text" id="insc_input_pseudo" class="form-control" name="pseudo" placeholder="Pseudonyme Minecraft.net" onkeypress="return verif_char_pseudo(event);">
	    	<span id="pseudo_ajax" style="display:none;"><img src="img/loader.gif"></span>
	    </div>
	</div>
 	<div class="form-group" id="insc_mail">
	    <label for="mail" class="col-lg-2 control-label" style="width:200px;">Adresse électronique</label>
	    <div class="col-lg-6">
	      	<input type="email" id="insc_input_mail" class="form-control" name="mail" placeholder="Adresse électronique">
	    	<span id="mail_ajax" style="display:none;"><img src="img/loader.gif"></span>
	    </div>
	</div>
	<div class="form-group" id="insc_pswd">
	    <label for="pswd" class="col-lg-2 control-label" style="width:200px;">Mot de passe</label>
		<div class="col-lg-6">
	      	<input type="password" id="insc_input_pswd" class="form-control" name="pswd" placeholder="Mot de passe">
	    </div>
  	</div>
	  	<div class="form-group" id="insc_pswdv">
	    <label for="pswdv" class="col-lg-2 control-label" style="width:200px;">Mot de passe</label>
	    <div class="col-lg-6">
	      	<input type="password" id="insc_input_pswdv" class="form-control" name="pswdv" placeholder="Encore une fois">
	    </div>
  	</div>
	<div class="checkbox">
    	<label>
      		<input type="checkbox" name="checkbox" id="insc_checkbox"> J'accepte les <a onclick="alert(regles);">règles</a> et m'engage à les respecter.
    	</label>
  	</div>
  	<div id="ajax_return"></div>
  	<input type="submit" id="insc_sub" class="btn btn-orange btn-block" style="margin-top:20px;" value="S'inscrire">
</form>

Mon script jQuery

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$(document).ready(function(){
	$("#insc_form").on("submit", function(){
		$.ajax({
                        url: $this.attr("action"),
                        type: $this.attr('method'),
                        data: $this.serialize(),
                        dataType: 'json',
                        success: function(data){
            	            $("#ajax_return").append(data);
                            alert(data);
                        }
                });
	});
});

Et ce que dois renvoyer PHP pour l'instant

Code php :

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

1
2
3
<?php
	echo json_encode(print_r($_POST));
?>

[Bovino]

Traité un nombre incalculable de fois...

Pourquoi ne pas utiliser AJAX pour vérifier les données de mon inscription ?

La réponse courte à cette question, ce serait : "Parce qu'actuellement, tu ne sais pas te servir d'AJAX".

Bref, pour aller à l'essentiel : lors du clic sur un bouton submit, le navigateur :

• exécute les fonctions JavaScript liées à cet événement ;
• soumet le formulaire à l'adresse indiquée par l'attribut action.

Et c'est bien ce qui se passe dans ton code : tu envoies la requête AJAX, puis tu pars vers la page de soumission (sans même avoir attendu la réponse de la requête).
Donc tant que ton script n'indique pas expressément de ne pas effectuer la seconde étape, ton formulaire sera soumis.

Maintenant, à toi de te plonger dans les tutos de base, dans les FAQ, dans la recherche sur le forum pour comprendre comment éviter cela.

PS : et au passage

Code php :

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

echo json_encode(print_r($_POST));

ça n'a aucun sens de transformer en JSON une fonction d'affichage...

[Invité]

Tu penses bien que j'avais déjà testé ça avant de poster dans ce forum. Et si cela fonctionnait je n'aurais pas eu le besoin de demander votre aide. J'ai aussi essayé d'ajouter un return false; après mon instruction ajax mais sans succès. Voyant qu'aucune solution testée ne marchaient j'ai remis mon code de départ.

[SpaceFrog]

J'ai aussi essayé d'ajouter un return false; après $.ajax mais sans succès.

c'est que tu l'as mal implémenté !

il faut inhiber l'envoi du form soit par un preventDefault soit par un return false.

[Invité]

Je teste ça et je reviens vous voir lorsque j'ai fini

[SpaceFrog]

essaye

Code :

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

1
2
3
$("#insc_form").on("submit", function(e){
                 e.preventDefalut();
		$.ajax({

[Bovino]

Code :

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

$this.attr("action")

Et on peut savoir à quoi correspond la variable $this selon toi ?