gestion dynamique du formulaire sans Javascript

Version imprimable

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:

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

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:

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

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.

31/10/2008, 11h42
reneguenon

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

Code:

<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"
01/11/2008, 15h24
reneguenon

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 ?

Citation:

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:

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() ; } }

02/11/2008, 20h35
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...
Le code que t'as mis est à mettre dans l'action ou bien dans la méthode validate de l'actionForm...
02/11/2008, 21h02
c_nvy

Citation:

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:

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

Citation:

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.

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

Code:

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:

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:

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() ;
	    	}
	    	}

02/11/2008, 22h58
c_nvy
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:

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

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

Code:

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

03/11/2008, 00h46
reneguenon
Je pense qu'il y avait un pb dans ton code, j'ai testé avec ce code et ca marche :
Code:

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:

1 2 <logic:equal name="formACIN" property="txtCOP" value="10"> .... </logic:equal>
Merci bcp de ton aide

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:

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:

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.

03/11/2008, 10h38
reneguenon
J'ai eu un nullpointerException lors de l'utilisation de ton code à ce niveau :
Code:

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
03/11/2008, 12h15
c_nvy

Citation:

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.:roll:
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 :resolu:
03/11/2008, 15h10
reneguenon

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 :oops::oops:, tout fonctionne, mille Merci ;)