Soumisson de formulaire avec ajax

[demenvil]

Bonjour,
J'ai mis en place à partir d'un tuto un form jquery/ajax/php pour faire une manière rapide d'envoyer un message privé à un membre sans passer par la page avec l'éditeur de mise en form.
Alors mon formulaire marche bien le MP et créer etc mais l'ajax ne semble pas fonctionner...

Donc ma page normalement ne doit pas se recharger, sauf que bah mon formulaire tombe du coup sur ma page de traitement...

Je me suis basé sur ce tutoriel :
Le tuto et voici la démo sur laquel je me suis basé la demo.

Sur le tuto le php n'est pas le même que le mien mais le fonctionnement et le même :

Voici mes code : Le formulaire
Code : HTML

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<p><strong>Envoyer un message privé rapide</strong></p>
				       <div id="preview"></div>
        <div id="formbox"> 
            <form name="form" id="form" action="script/mp/fast.php" method="post">
                <ul id="ngothastyle3">
                    <li>
                        <label>Sujet</label>
                        <input type="text" name="title" class="" maxlength="40" />
                    </li>
                    <li>
                        <label>Message</label>
                        <textarea name="message" rows="5" cols="45" class=""></textarea>
                    </li>
 
                    <li>
 
                        <input type="submit" value=" Envoyer ">
                    </li>
                </ul>
            </form>            
 
			</div>

Le js :

Code : JavaScript -

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
<script type="text/javascript">
            $('document').ready(function(){
 
			$('#form').validate({
                    rules:{
                        "title":{
                            required:true,
                            maxlength:40
                        },
 
                        "message":{
                            required:true
                        }},
 
                    messages:{
                        "title":{
                            required:"This field is required"
                        }, 
 
                        "message":{
                            required:"This field is required"
                        }},
 
                    submitHandler: function(form){
                      $(form).ajaxSubmit({
        target: '#preview', 
        success: function() { 
        $('#formbox').slideUp('fast'); 
        } 
    }); 
 
                    }
 
            })
 
        });
        </script>

Et mon php qui insère dans la bdd.(pas fini niveau vérification mais fonctionnel pour les tests)
Code : PHP -

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<?php
session_start();
include('../../include/id.php');
include('../../include/ClassSecu.php'); //On inclu la page des fonctions
include('../../include/function.php');
if($_SERVER["REQUEST_METHOD"] == "POST")
{
$texte=Securite::bdd($_POST['message']);
$title = Securite::bdd($_POST['title']);
if(strlen($title)>0 && strlen($texte)>0)
{
	$date_c = date('d-m-Y \à H:i');//Date format fr
	$name_e = $_SESSION['pseudo'];
	$d = $_SESSION['d'];
	$requete = mysql_query("INSERT INTO com_mp (id, id_mp_c, name_e, name_d, title, cont, date, nview, folder) VALUES ('', '', '$name_e', '$d', '$title', '$texte', '$date_c','1', 'default')") or die(mysql_error());
echo '<div id="success" class="info_div"><span class="ico_cancel">Message privée bien envoyé !</span></div>';
}
else
{
echo'<div id="fail" class="info_div"><span class="ico_cancel">Erreur lors de l\'envoi !</span></div>';
}
}
?>

Voila mon code et le même a deux trois choses près que celui du tuto mais ça ne fonctionne pas était débutant en js...

Merci à vous !

[MrPringle]

Tu dois ajouter "return false;" à ta fonction submitHandler pour éviter le comportement natif (envoi du formulaire) je suppose.