Envoi d'un formulaire sans changer de page
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:
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:
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:
1
2
3
| <?php
echo json_encode(print_r($_POST));
?> |
