Affichage du résultat d'un formulaire avec JQuery

**aymen8219** · 18/11/2011, 11h58

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 :

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
<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 :

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
<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.

**Hijack** · 18/11/2011, 14h31

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 :

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
 
<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.).

**aymen8219** · 18/11/2011, 16h07

bonjour,

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

code:

Code :

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
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>

**Hijack** · 18/11/2011, 16h15

Code :

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
 
      <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(...)" ?

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.

**aymen8219** · 18/11/2011, 16h41

bonjour,

je suis désolé t' raison

voila je viens de rectifier mon code mais le probleme persiste encore

Code :

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
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>

**Hijack** · 18/11/2011, 17h04

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

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

Affichage du résultat d'un formulaire avec JQuery

jQuery

Vue hybride

Discussions similaires

Partager

Partager