Affichage du résultat d'un formulaire avec JQuery

Version imprimable

Bonjour,

j'ai créer un formulaire avec php et JQuery et je veux lorsque du clik sur le bouton le résulta du formulaire s'affiche dans la même page au dessous de mon formulaire, mais je n'arrive pas a afficher le résultat au dessous de mon formulaire ci dessous mon code:

mon script JS

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
<script type="text/javascript">
 
 
 
           function journal_Titre(){
 
        $("#journale_t").submit(function(){
 
        var date_d = $("#date_d").val();
                var date_f = $("#date_f").val();
                datastring = "date_d="+date_d+"&date_f="+date_f;
                $.ajax({
                    type: "POST",
                    url:"journale-titre-info.php",
                    data:datastring,
                    success: function(html){
                        $("#journal").html(html);
 
                    }                   
                });
    });
 
 
           }
 
   </script>

le body de ma page:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<body>
<table   align="center">
                            <form method="post" action="" id="journale_t">
 
                                <tr>
                                    <td >Date Début</td>
                                    <td ><input type="text" name="DateDeb" id="date_d" size="12" ></td>
                                    <td >Date Fin</td>
                                    <td ><input type="text" name="DateFin" id="date_f" size="12"></td>
                                    <td ><input type="submit" value="Valider" id="Valider_jt" onclick="journal_Titre()" ></td>
                                </tr>
 
                            </form>
                        </table>
        <div id="journal"></div>
 
 
    </body>

merci pour votre aide.

Bonjour aymen8219,
pour commencer essais de toujours mettre une clause "error" lorsque tu fais une requête Ajax, car ton erreur est peut être que le chemins d'accès au fichier "journale-titre-info.php" est faux. Cette clause "error" peut te permettre dans ta page d'afficher l'erreur rencontré.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
<script type="text/javascript">
      function journal_Titre(){    
          $("#journale_t").submit(function(){        
              var date_d = $("#date_d").val();
              var date_f = $("#date_f").val();
              datastring = "date_d="+date_d+"&date_f="+date_f;
              $.ajax({
                    type: "POST",
                    url:"journale-titre-info.php",
                    data:datastring,
                    success: function(msg){
                        $("#journal").html(msg);                       
                    },
                    error: function(msg){
                        alert(msg);
                    }                  
                });
                return false;
         });
      }
   </script>

Ensuite le formulaire recharge la page lors d'un submit, ce qui peut aussi t'empêcher de voir le résultat de ta requête.
Tu devrais rajouter un "return false;" après la requête ajax pour empêcher le formulaire de se soumettre (Comme écrit sur le code ci-dessus.). :ccool:

Affichage du résultat d'un formulaire avec JQuery

bonjour,

je viens de faire ce que tu ma demander mais la résultat ne s'affiche pas encore :cry:
code:

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
48
49
50
51
52
53
54
55
56
57
58
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 
        <link rel="stylesheet" href="releve.css"  type="text/css" />
        <script type="text/javascript" src="jquery-ui-1.8.16/jquery-1.6.2.js" ></script>
 
        <title>CGF : Journal Transactions</title>
 
      <script type="text/javascript">
 
function journal_Titre(){
 
    $("#Valider_jt").change(function(){
 
        var date_d = $("#date_d").val();
                var date_f = $("#date_f").val();
                //datastring = "date_d="+date_d+"&date_f="+date_f;
                $.ajax({
                    type: "POST",
                    url:"journale-titre-info.php",
                    //data:datastring,
                    success: function(msg){
                        $("#journal").html(msg);
 
                    },
                     error: function(msg){
                        alert(msg);
                    }  
                });
                 return false;
    });
 
 
 
            } 
 
   </script>    
        </head>
    <body>
<table   align="center">
                            <form method="post" action="" id="journale_t">
 
                                <tr>
                                    <td >Date Début</td>
                                    <td ><input type="text" name="DateDeb" id="date_d" size="12" ></td>
                                    <td >Date Fin</td>
                                    <td ><input type="text" name="DateFin" id="date_f" size="12"></td>
                                    <td ><input type="submit" value="Valider" id="Valider_jt"  ></td>
                                </tr>
 
                            </form>
                        </table>
        <div id="journal"></div>
 
 
    </body>
</html>

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
 
      <script type="text/javascript">
 
function journal_Titre(){
 
    $("#Valider_jt").change(function(){
 
        var date_d = $("#date_d").val();
                var date_f = $("#date_f").val();
                //datastring = "date_d="+date_d+"&date_f="+date_f;
                $.ajax({
                    type: "POST",
                    url:"journale-titre-info.php",
                    //data:datastring,
                    success: function(msg){
                        $("#journal").html(msg);
 
                    },
                     error: function(msg){
                        alert(msg);
                    }  
                });
                 return false;
    });
 
 
 
            } 
 
   </script>

Tiens ? Pourquoi tu as changé "$("#journale_t").submit(...) " en "$("#Valider_jt").change(...)" ? 8O
Et tu dois garder ta variable "datastring" ainsi que "data:datastring,".
C'est justement le 'data:datastring' qui permet de transmettre tes paramètres à la page visée.

bonjour,

je suis désolé t' raison :oops: voila je viens de rectifier mon code mais le probleme persiste encore :roll:

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
48
49
50
51
52
53
54
55
56
57
58
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 
        <link rel="stylesheet" href="releve.css"  type="text/css" />
        <script type="text/javascript" src="jquery-ui-1.8.16/jquery-1.6.2.js" ></script>
 
        <title>CGF : Journal Transactions</title>
 
      <script type="text/javascript">
 
function journal_Titre(){
 
     $("#journale_t").submit(function(){
 
        var date_d = $("#date_d").val();
                var date_f = $("#date_f").val();
                datastring = "date_d="+date_d+"&date_f="+date_f;
                $.ajax({
                    type: "POST",
                    url:"journale-titre-info.php",
                    data:datastring,
                    success: function(msg){
                        $("#journal").html(msg);
 
                    },
                     error: function(msg){
                        alert(msg);
                    }  
                });
                 return false;
    });
 
 
 
            } 
 
   </script>    
        </head>
    <body>
<table   align="center">
                            <form method="post" action="" id="journale_t">
 
                                <tr>
                                    <td >Date Début</td>
                                    <td ><input type="text" name="DateDeb" id="date_d" size="12" ></td>
                                    <td >Date Fin</td>
                                    <td ><input type="text" name="DateFin" id="date_f" size="12"></td>
                                    <td ><input type="submit" value="Valider" id="Valider_jt"  ></td>
                                </tr>
 
                            </form>
                        </table>
        <div id="journal"></div>
 
 
    </body>
</html>

18/11/2011, 17h04
Hijack

Ah, je viens de remarquer quelque chose, ton écoute de l'évenement "submit" du formulaire est écrite avant l'apparition dans le DOM de ton formulaire.
En clair, tu essais d'attacher une action à quelque chose qui n'existe pas encore.

Déplace ton code javascript après ton formulaire. Cela devrait fonctionner un peu mieux je pense :mrgreen:

D'autres solution existe, tel que rajouter une instruction "ready" qui va attendre le chargement complet de la page, et donc l'apparition du DOM, avant d'exécuter le code js.

Essait déjà celle que je t'ai donné pour voir si je me trompe ou non ;)
18/11/2011, 18h14
Bovino

Euh... c'est pire que ça, l'événement est dans la fonction journal_Titre qui ne semble jamais appelée... Alors c'est sûr que ça marchera difficilement.

Citation:

D'autres solution existe, tel que rajouter une instruction "ready" qui va attendre le chargement complet de la page, et donc l'apparition du DOM, avant d'exécuter le code js.

Oui, ou encore mieux : apprendre les bases de jQuery (et de JavaScript accessoirement) avant de vouloir l'utiliser... :whistle:

merci pour votre aide ci dessous la solution si quelqu'un autre aura le même problème :lol:

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
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 
 
        <script type="text/javascript" src="jquery-ui-1.8.16/jquery-1.6.2.js" ></script>
 
        <title>CGF : Journal Transactions</title>
        <script type="text/javascript">
            $(document).ready(function(){
                $("#journale_t").submit(function(){
                    var date_d = $("#date_d").val();
                    var date_f = $("#date_f").val();
                    datastring = "date_d="+date_d+"&date_f="+date_f;
                    $.ajax({
                        type: "POST",
                        url:"resumevaleur.php",
                        data:datastring,
                        success: function(msg){
                            $("#journal").html(msg);
                        },
                        error: function(msg){
                            alert(msg);
                        }
                    });
                    return false;
                });
            });
        </script>
    </head>
    <body>
        <table   align="center">
            <form method="post" action="" id="journale_t">
 
                <tr>
                    <td >Date Début</td>
                    <td ><input type="text" name="DateDeb" id="date_d" size="12" ></td>
                    <td >Date Fin</td>
                    <td ><input type="text" name="DateFin" id="date_f" size="12"></td>
                    <td ><input type="submit" value="Valider" id="Valider_jt"  ></td>
                </tr>
 
            </form>
        </table>
        <div id="journal"></div>
    </body>
</html>