gestion dynamique du formulaire sans Javascript

**reneguenon** · 30/10/2008, 17h40

Bonjour,

Je suis en train de travailler sur un formulaire, et il doit gérer dynamiquement les champs, ma question est de savoir si c'est possible de gérer dynamiquement les champs sans utiliser le JS, par exemple si je sélectionne 10 pour le champ textCOP, les 3 derniers champs ne doivent pas s'afficher, et certains champs doivent se préremplir...

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
<html:form action="/ACIN.do">
 
  		*<bean:message key="tcpip.codeOp"/> :
  			<html:select property="textCOP" value="10">	
  				<html:option>10</html:option>
	  			<html:option>11</html:option>
  				<html:option>21</html:option>
  				<html:option>22</html:option>
  				<html:option>23</html:option>
  				<html:option>24</html:option>
  				<html:option>30</html:option>
  				<html:option>31</html:option>
  				<html:option>40</html:option>
  			</html:select>	
    	*<bean:message key="tcpip.codeIns"/> : <html:text property="txtINS" size="30" maxlength="6"/>
	    *<bean:message key="tcpip.codeSubIns"/> : <html:text property="txtSUBINS" size="30" maxlength="6"/>
	    *<bean:message key="tcpip.seqAddr"/> : <html:text property="txtSEQADDR" size="20" maxlength="2"/>
	    *<bean:message key="tcpip.typeAddr"/> : <html:text property="txtTYPEADDR" size="30" maxlength="6"/>
	    *<bean:message key="tcpip.nom"/> : <html:text property="txtNOM" size="60" maxlength="50"/>
	    *<bean:message key="tcpip.rue"/> : <html:text property="txtRUE" size="60" maxlength="50"/>
	    *<bean:message key="tcpip.ville"/> : <html:text property="txtVILLE" size="60" maxlength="50"/>
 
    </html:form>

Merci de votre aide

**c_nvy** · 30/10/2008, 18h03

Si tu ne veux pas utiliser du Javascript, tu peux soumettre le formulaire lors de la sélection d'une valeur dans la liste déroulante via l'attribut onchange :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<html:select property="textCOP" onchange="document.forms[0].submit();">

et pour conditionner l'affichage des champs texte, tu peux utiliser le tag logic:equal :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<logic:equal name="nomDuFormBean" property="textCOP" value="10">
	    *<bean:message key="tcpip.nom"/> : <html:text property="txtNOM" size="60" maxlength="50"/>
	    *<bean:message key="tcpip.rue"/> : <html:text property="txtRUE" size="60" maxlength="50"/>
	    *<bean:message key="tcpip.ville"/> : <html:text property="txtVILLE" size="60" maxlength="50"/>
</logic:equal>

et pour pré-remplir certains champs, étant donné que le formulaire est soumis lors de la sélection d'une valeur dans la liste déroulante, l'Action de path /ACIN est exécutée. Donc, dans cette Action, tu ajoutes un test sur la valeur de la propriété textCOP et si celle-ci est égale à 10, tu initialises les propriétés des champs en question via les setters de l'ActionForm.

**reneguenon** · 31/10/2008, 11h42

Merci pour ta réponse, j'ai testé avec cette ligne :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<html:select property="textCOP" onchange="document.forms[0].submit();">

Mais, je rencontre le problème suivant, dés que sélectionne une option, le formulaire est validé, et je peux plus saisir les autres champs, je ne comprends pas pourquoi, ce que je veux c'est avoir une modification dynamique de mes champs, et que la validation du formulaire se fait par clic sur le bouton "Valider"

**reneguenon** · 01/11/2008, 15h24

J'ai pensé utiliser des tests <c:if> en utilisant des taglibs JSTL (que je connais pas très bien), mais je ne sais pas vraiment comment je peux récupérer de façon dynamique le contenu de ma liste déroulante ?

**c_nvy** · 02/11/2008, 16h14

Envoyé par reneguenon

Mais, je rencontre le problème suivant, dés que sélectionne une option, le formulaire est validé, et je peux plus saisir les autres champs, je ne comprends pas pourquoi, ce que je veux c'est avoir une modification dynamique de mes champs, et que la validation du formulaire se fait par clic sur le bouton "Valider"

Tu as une solution en mettant validate à false dans le mapping de l'Action, en ajoutant un attribut property dans le tag html:submit et en appelant la validation dans l'Action lorsque la valeur de la propriété affectée au bouton submit est égale à "Valider" :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
TonActionForm tonActionForm = (TonActionForm) form ;
String bouton=tonActionForm.getProprieteBoutonSubmit() ;
 
if ( "Valider".equals(bouton) )
{
	ActionMessages errors = form.validate(mapping, request);
	if ( !errors.isEmpty() )
	{
		this.saveErrors(request, errors);
		return mapping.getInputForward() ;
	}
}

**reneguenon** · 02/11/2008, 20h35

Je t'avoue que j'ai pas bien compris ta solution, est ce que je dois créer un champ "proprieteBoutonSubmit()" avec un getter et un setter dans mon actionForm...
Le code que t'as mis est à mettre dans l'action ou bien dans la méthode validate de l'actionForm...

**c_nvy** · 02/11/2008, 21h02

Envoyé par reneguenon

Je t'avoue que j'ai pas bien compris ta solution, est ce que je dois créer un champ "proprieteBoutonSubmit()" avec un getter et un setter dans mon actionForm...

J'ai écrit qu'il fallait ajouter un attribut property au tag html:submit.
Cela sous-entend effectivement qu'il faut créer une propriété dans l'ActionForm qui correspond au bouton submit et qui contiendra sa valeur.
Dans mon exemple, j'avais mis "proprieteBoutonSubmit" pour que tu comprennes que ça correspond au nom de la propriété que tu auras choisi de mettre pour le bouton submit.
Mais tu peux l'appeler comme tu veux.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<html:submit property="bouton" value="Valider"/>

Envoyé par reneguenon

Le code que t'as mis est à mettre dans l'action ou bien dans la méthode validate de l'actionForm...

J'ai écrit "en appelant la validation dans l'Action".
Donc, oui, le code que j'ai donné est à mettre dans l'Action.

**reneguenon** · 02/11/2008, 22h12

Cela ne change rien, dés que je charge une option, le formulaire est validé, voici ce que j'ai fais :
struts-config :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<!-- Mappings...-->
	<action-mappings>	    	
		<action path="/ACIN" type="main.actions.ACINAction" name="formACIN" validate="false" scope="session" input="/vues/acin.jsp">
    		<forward name="Confirmation" path="/vues/confirm.jsp" />
       	</action>
	</action-mappings>

jsp : formulaire

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<td>
  			<html:select property="txtCOP" onchange="document.forms[0].submit();">	
  				<html:option value="Sélectionner un code"></html:option>
  				<html:option value="10"></html:option>
	  			<html:option value="11"></html:option>
  				<html:option value="21"></html:option>
  				<html:option value="22"></html:option>
  				<html:option value="23"></html:option>
  				<html:option value="24"></html:option>
  				<html:option value="30"></html:option>
  				<html:option value="31"></html:option>
  				<html:option value="40"></html:option>
  			</html:select>	
  		</td>

et l'action :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
public ActionForward execute(ActionMapping mapping, ActionForm form, 
					HttpServletRequest request, HttpServletResponse response) throws Exception {
	    	ContactForm contactForm = (ContactForm) form ;
	    	String bouton=contactForm.getBouton();
 
	    	if ("Valider".equals(bouton) ){
	    	ActionMessages errors = form.validate(mapping, request);
	    	if ( !errors.isEmpty() )
	    	{
	    	    this.saveErrors(request, errors);
	    	    return mapping.getInputForward() ;
	    	}
	    	}

**c_nvy** · 02/11/2008, 22h58

C'est bizarre. Normalement, la valeur de la propriété bouton devrait être égale à Valider seulement dans le cas où tu cliques sur le bouton Valider.
Comment as-tu initialisé la propriété bouton dans l'ActionForm ?

Sinon, le form-bean étant dans le scope session, il faut réinitialiser à null, ou à une autre valeur que "Valider", la propriété bouton dans la méthode reset de l'ActionForm :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
	public void reset(ActionMapping mapping, HttpServletRequest request)
	{
		this.bouton=null ;
	}

**reneguenon** · 02/11/2008, 23h10

voici comment j'ai rajouté la propriété bouton dans l'actionForm :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
private String bouton;
 
	    public String getBouton() {
		return bouton;
	    }
	    public void setBouton(String bouton) {
		this.bouton = bouton;
	    }

**reneguenon** · 03/11/2008, 00h46

Je pense qu'il y avait un pb dans ton code, j'ai testé avec ce code et ca marche :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
if ("Valider".equals(bouton) ){
	    	    ActionMessages errors = form.validate(mapping, request);
	    	}else{
	    	   return mapping.getInputForward() ;
	    	}

par contre dans le test des options, je veux pouvoir tester 2 options "10" ou "11" par exemple, et je ne sais pas le faire avec des balises <logic:equal> :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<logic:equal name="formACIN" property="txtCOP" value="10">
	   ....	</logic:equal>

Merci bcp de ton aide

**c_nvy** · 03/11/2008, 09h14

Effectivement, il faut bien rediriger vers la page définie dans l'attribut input lorsque la valeur de la propriété bouton est différente de Valider.
Par contre, lorsque la valeur de la propriété bouton est égale à Valider et qu'il y a des erreurs de validation, il faut également rediriger vers cette page.

Il faudrait donc plutôt écrire :

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
if ( "Valider".equals(bouton) )
{
	ActionMessages errors = form.validate(mapping, request);
	if ( !errors.isEmpty() )
	{
		this.saveErrors(request, errors);
		return mapping.getInputForward() ;
	}
	else
	{
		// traitement ok
		...
		return mapping.findForward("success") ;
	}
}
else
{
    	   return mapping.getInputForward() ;
}

Sinon, pour tester les valeurs des options, avec les tag logic:equal, tu n'as pas d'autre solution que d'ajouter un autre tag logic:equal :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<logic:equal name="formACIN" property="txtCOP" value="10">
	   ....	</logic:equal>
<logic:equal name="formACIN" property="txtCOP" value="11">
	   ....	</logic:equal>

Il n'y a qu'avec la JSTL que tu pourrais directement tester si la valeur est égale à 10 ou à 11 dans le tag c:if.

**reneguenon** · 03/11/2008, 10h38

J'ai eu un nullpointerException lors de l'utilisation de ton code à ce niveau :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
ActionMessages errors = form.validate(mapping, request);
	if ( !errors.isEmpty() )
	{
		this.saveErrors(request, errors);
		return mapping.getInputForward() ;
	}

, mais comme je n'utilise aucune validation de données, c'est géré par une autre application qui renvoie des erreurs en cas de mauvaise saisie de données, j'ai donc supprimé cette partie, je ne sais pas si c'est une bonne idée...
par contre, j'ai utilisé des tags JSTL, et c'est plus propre que les balises <logic:equal>
Merci bien de ton aide

**c_nvy** · 03/11/2008, 12h15

Envoyé par reneguenon

mais comme je n'utilise aucune validation de données, c'est géré par une autre application qui renvoie des erreurs en cas de mauvaise saisie de données, j'ai donc supprimé cette partie, je ne sais pas si c'est une bonne idée...

Et tu me le dis seulement maintenant.

Depuis le début de la discussion, je t'explique comment faire appel à la validation dans l'Action alors qu'en fait, c'est gérer autrement.

M'enfin...

Si tout fonctionne, n'oublie pas le tag

**reneguenon** · 03/11/2008, 15h10

Désolé c_nvy si je t'ai embêté pour rien, en fait ma question dés le début était pour la gestion dynamique du formulaire, mais j'avoue que j'aurai dû te le dire au départ

, tout fonctionne, mille Merci

gestion dynamique du formulaire sans Javascript

Struts 1 Java

Discussions similaires

Partager

Partager