Résultat d'un formulaire dans une DIV

Version imprimable

Bonjour,
j'ai créé un formulaire tout basique en html. Il execute un fichier resultat.php qui renvoit une requete SQL sous forme assez basique : une ligne de texte.
Je voudrais que ce texte généré apparaisse dans une DIV sur la même page que le formulaire initial.

J'ai créé ceci, mais ça ne marche pas, et je ne comprends pas l'erreur :

Mon script :
Code:

1 2 3 4 5 6 7 8 9 10 <script src="https://code.jquery.com/jquery-1.10.2.js"></script> <script> $('#form1').submit(function (e) { e.preventDefault(); $.post('result.php', $('#form1').serialize(), function (data, textStatus) { $('#resultDIV').append(data); }); return false; }); </script>
et mon code HTML :
Code:

1 2 3 4 5 6 7 <form name="form1" action="result.php" method="post" id="form1"> <input type="text" name="data1"> <input type="text" name="data2"> <input type="submit" value="OK"> </form> <div id="resultDIV"></div>
Avec ceci, rien ne ne passe comme prévu, c'est à dire que mon formulaire ouvre la page result.php pour m'afficher ma requête. Ce que je ne veux pas puisque je veux rester sur ma page d'origine et afficher le résultat dans la DIV.

Finalement, j'ai trouvé. Voici la modif :
(si ça peut servir à d'autres)

Code:

1
2
3
4
5
6
7
8
9
10
<script>
$(document).ready (function() {
$("form").submit(function () {
$.post("result.php",$(this).serialize(),function(texte){    
$("div#resultDIV").append(texte);  
});
return false;
}); 
}); 
</script>

Citation:

Il execute un fichier resultat.php

Non ! "result.php"

<form name="form1" id="form1"> pas : '<form name="form1" ~~action="result.php" method="post"~~ id="form1">'.

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
$( function(){ // forme abrégée de $(document).ready(function(){
 
    $('#form1').on( "submit", function( event ){
 
        var jqXHR = $.get( 'result.php', $('#form1').serialize() ); // ou $.post() ou $.getJSON()
 
        setTimeout( function(){
            // Si l'objet différé existe dans l'état "attendre", 
            // alors exécute la méthode fail()
 
            if ( jqXHR && jqXHR.state() === "pending" ){
                jqXHR.abort();
            }
        }, 3000 ); // 3s
 
        jqXHR.done( function( data, textStatus, jqXHR ){
            // succès de la transaction, on doit traiter le contenu de data
            console.log( data, textStatus, jqXHR );
 
 
        });
 
        jqXHR.fail( function( jqXHR, textStatus, errorThrown ){
            // échec de la transaction, gérer la catastrophe
            console.log( jqXHR, textStatus, errorThrown );
 
        });
 
        jqXHR.always( function( jqXHR, textStatus ){
            // la transaction est terminée
            // nettoyage
            // exécution d'un code dépendant
            console.log( jqXHR, textStatus );
 
        });
 
        return false;
    });
 
});