Elements ajoutés dynamiquement non récupérés coté servlet

**Angelo121** · 19/04/2011, 17h07

Bonjour,

dans le cadre de mon projet de stage je réalise une application web.
Dans une des pages l'utilisateur peut ajouter des éléments dynamiquement.
Pour ceci j'utilise du javascript et la fonction innerHTML.
Une fois les informations entrée l'utilisateur valide via un submit l'ensemble des informations situées dans le "form".
Ces informations sont récupérées coté Servlet pour traitement.

Le problème que j'ai, est que lorsque je valide le formulaire, tout ce qui a été ajouté via le innerHTML est ignoré, pour être plus technique, les "getParameter" me retournent "null".

Je n'ai rien trouvé sur les autres posts qui traite de ce problème, si quelqu'un à déjà rencontré ce problème, je suis preneur

**jowo** · 20/04/2011, 09h35

Bonjour,

Assure-toi que ton innerHTML insère bien des éléments HTML input et qu'ils soient placés dans le formulaire.

**noOneIsInnocent** · 20/04/2011, 09h37

Bonjour

est-ce que tu utilises un framework ?
et est-que tes éléments ajoutés dynamiquement sont bien dans ta balise form ?
sinon pour voir ce qui est envoyé à ta servlet tu peux utiliser un plugin firefox pour voir les requêtes HTTP qui passent. je crois que le plugin s'appelle Http live ..tu trouveras facilement et il doit certainement y en avoir d'autres

postes nous aussi du code sinon ça va être difficile de t'aider

**Angelo121** · 20/04/2011, 10h33

Bonjour,

le innerHTML m'ajoute bien les éléments dans le formulaire.
Je n'utilise pas de framework en particulier.

Voici mon code

Dans ma jsp

Code html :

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
 
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
 
<html>
    <head>
        <jsp:include page="../commun/tete.jspf"/>
    </head>
    <body>
        <jsp:include page="../commun/entete.jspf"/>
        <jsp:include page="../commun/menus.jspf"/>
        <div id="corps">
            <h1>Cas de test</h1>
            <p>Les cas de tests réprésentent les résumés textuels des tests effectués.</p>
            <form method="post" action="/OutilQualif/CasTest?action=ajout">
                <div id="etapes">
                    <table>
                        <tr>
                            <td>Etapes</td>
                        </tr>
                    </table>
                    <div id="1" class="etape">
                        <table>
                            <tr>
                                <td>Etape</td>
                                <td>
                                    <input name="numE1" type="text" value="1" size="1"/>
                                    <input type="button" value="+" onclick="create_champ();"/>
                                </td>
                            </tr>
                            <tr>
                                <td>Nom Etape</td>
                                <td><input name="nomE1" type="text"/></td>
                            </tr>
                        </table>
                    </div>
                </div>
                <div align="center" style="clear: both">
                    <input type="hidden" value="0" name="i" />
                    <input type="button" value="Ajouter cas" onclick="verif_formulaire_castest(this.form)"/>
                </div>
            </form>
        </div>
    </body>
</html>

Dans ma servlet

Code java :

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
 
public class CasTest extends HttpServlet {
 
    protected void processRequest(HttpServletRequest request, HttpServletResponse response)
    throws ServletException, IOException {
        response.setContentType("text/html;charset=UTF-8");
        PrintWriter out = response.getWriter();
        try {
            String action =  request.getParameter("action");
            if(action.equals("ajout")){
                String i = request.getParameter("i");
 
                int ii = Integer.parseInt(i);
                for(int j=1; j<ii; j++){
                    String numE = request.getParameter("numE"+j);
                    if(numE!=null){
                        String nomE = request.getParameter("nomE"+j);
                    }
                }
            }
 
            ServletContext contexte = getServletContext();
            RequestDispatcher dispatcher = contexte.getRequestDispatcher("/WEB-INF/vues/castest.jsp");
            dispatcher.forward(request, response);
 
        }catch(Exception e){
            e.printStackTrace();                    
        } finally {
            out.close();
        }
    }

Et mon code Javascript

Code javascript :

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
 
var i = 2;
 
function create_champ(){
    var newdiv = "<div id='"+i+"' class=\"etape\">"+
        "<table><tr><td>Etape</td>"+
        "<td><input id=\"numE"+i+"\" type=\"text\" value=\""+i+"\" size=\"1\"/>"+
        "<input type=\"button\" value=\"+\" onclick=\"create_champ();\"/>"+
        "<input type=\"button\" value=\"-\" onclick=\"remove_champ("+i+");\"/></td></tr>"+
        "<tr><td>Nom Etape</td>"+
        "<td><input id=\"nomE"+i+"\" type=\"text\"/></td></tr></table>"+
        "</div>";
 
    document.getElementById('etapes').innerHTML += newdiv;
    i++;
}
 
function verif_formulaire_castest(formulaire){
    document.getElementById('i').value = i;
    formulaire.submit();
}

Je développe sous IE6 (imposé), et pour je ne sais quelle raison le submit ne fonctionne pas sous Firefox, donc je peux pas
tester avec l'addon

Le problème se voit au niveau du "for" dans la servlet, si le j est supérieur à 1 (c'est à dire s'il s'agit d'un div ajouté via innerHTML) le résultat du "String numE = request.getParameter("numE"+j);" donne numE=null

**jowo** · 20/04/2011, 10h45

Le problème vient probablement que tu ne renseignes pas l'attribut name des éléments input dans la fonction create_champ.

**Angelo121** · 20/04/2011, 10h48

OMG, mais quel boulet je fais !

Oui c'est bien ça, honte à moi.

Merci beaucoup.

**noOneIsInnocent** · 20/04/2011, 10h49

ça c'est ton premier problème
si ça ne fonctionne pas avec Firefox c'est que tu dois avoir une erreur JS
tu devrais installer firebug pour firefox qui te permettra de voir tes erreurs
pour l'instant ton développement n'est valable que pour IE 6 mais vu qu'on est déjà à la version 9 je te conseille de vérifier pour les autres versions et pour FF

**Angelo121** · 20/04/2011, 11h02

Oui je vais regarder pourquoi cela ne fonctionne pas sous Firefox.
En fait c'était IE8 je me suis trompé.
Je marque tout de même résolu.

Merci

Elements ajoutés dynamiquement non récupérés coté servlet

Servlets/JSP Java

Discussions similaires

Partager

Partager