touche entrée dans formulaire

**pram** · 04/04/2003, 16h45

Salut c'est encore moi,

Encore un petit problème pour terminer la semaine...la touche entrée ne fonctionne pas pour soumettre un formulaire. Pourtant le html généré me semble correct et ressemble comme 2 gouttes d'eaux à d'autres pages (du même projet) qui fonctionnent.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<base href="http://localhost/GestAbsBin/GestAbs.dll/"><link rel="stylesheet" type="text/css" href="/SharedPortal/Skins/msnblue/xslc.css"><meta http-equiv="Expires" content="0"><script language="javascript"><!--
var XMLC_SkinPath = '/SharedPortal/Skins/msnblue/';
var XMLC_Portal = '/SharedPortal/';
var XMLC_PictosPath = '/SharedPortal/Pictos/original/';
function handleFormKeyPress(form) { if (13 == event.keyCode) form.submit(); }
function ConfirmDelete(formName, DeleteAction, Prompt) {
  D = document.forms[formName];
  if (confirm(Prompt)) {
    D.action = DeleteAction;
    D.submit();
  }
}
--></script><script language="javascript" src="/SharedPortal/XRollover.js"></script><title>Connexion</title></head>

Pour le formulaire, rien de sorcier, j'utilise la template xslc:buttonpad avec un parametre ResetAction.

Qu'est ce qui pourrait faire que dans un même xmlmodule , la touche entrée fonctionne pour un xmlservice et pas pour un autre ?

**Nicolas.Cogi** · 07/04/2003, 15h47

C'est dans le html généré qu'il faut regarder pour avoir la réponse à cette question :

La fonction javascript handleFormKeyPress doit etre appellée par un gestionnaire d'événement pour fonctionner. Il y a fort à parier que la balise <form> de l'écran qui n'accepte pas la touche entrée par défaut n'a pas l'attribut onkeypress="" pour appeler la fonction.

Le code html a généré est le suivant :

Code :

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

<form name="MainForm" action="..." method="POST" onkeypress="handleFormKeyPress(this);">...</form>

Avec cet attribut, à chaque fois qu'un utilisateur presse une touche sur son clavier, avec Internet Explorer en focus bien sûr, l'événement "KeyPress" est tiré et remonte (le terme est "bubble" en javascript

) vers les balises parentes, pour trouver tous les gestionnaires possibles. L'événement va donc remonter jusque la balise <form>, le gestionnaire va etre tiré et la fonction handleFormKeyPress appellée. Si on veut etre sur que l'événement ne remonte pas plus loin, on peut compléter le code avec un return(false);, comme ci-dessous :

Code :

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

<form name="MainForm" action="..." method="POST" onkeypress="handleFormKeyPress(this); return(false);">...</form>

Ici, l'événement remontera jusqu'a la balise <form> et s'arretera là.

Voila !

**pram** · 08/04/2003, 09h47

En effet il n'y a pas d'événement 'onkeypress' sur la balise form. Mais ce qui me surprend c'est que pour une page générée par XMLRAD de type 'Form' avec un bouton 'valider' et un bouton 'supprimer' , il n'y a pas non plus cet évènement et la touche entrée fonctionne. Il y a seulement un évènement 'onclick' sur le bouton 'valider' et rien d'autre !? comme le code suivant :

Code :

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

td><a href="." onclick="document.MainForm.submit(); return false;"><img alt="Soumettre" border="0" onmouseover="ImgOver(this, '/SharedPortal/Skins/msnblue/button_submit');" onmouseout="ImgOut(this, '/SharedPortal/Skins/msnblue/button_submit');" onmousedown="ImgDown(this, '/SharedPortal/Skins/msnblue/button_submit');" src="/SharedPortal/Skins/msnblue/button_submit.gif"></a></td>

Il y a un truc qui m'échappe ....

**Julien C.** · 08/04/2003, 18h34

En effet, les formulaires générés avec XMLRAD de type Form avec un bouton "valider" et un bouton "supprimer", sont automatiquement postés lorsque l'utilisateur appuie sur la touche Entrée, alors qu'il n'y a aucun évènement de type "onkeypress" qui spécifie ce comportement.

Ceci est tout simplement du au fait que c'est le navigateur qui effectue cela. En effet, construits donc une page HTML toute simple avec un champ texte dans un formulaire et un bouton submit :

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
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Formulaire de test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<form name="MainForm" method="POST" action="FakeAction">
	Mon Input :	<input type="text" name="MonInput" value="Click ici !"/><br/><br/>
	<input type="submit" value="Sauver"/>
	<input type="reset" value="Annuler"/>
</form>
</body>
</html>

Quand tu click dans ton champ texte, tu remarqueras que le navigateur donne le focus au bouton Submit. Donc dés que tu taperas Entrée, c'est le navigateur qui postera ton formulaire sans même avoir à utiliser de javascript pour recréer ce comportement...

Voilà !

**pram** · 09/04/2003, 15h56

Merci pour cers eclaircissements mais par conséquent je ne comprend pas pourquoi la touche entrée ne fonctionne pas sur ma page alors que je n'ai rien fait (de volontaire) pour la désactiver ?

**Julien C.** · 09/04/2003, 15h59

Peux-tu copier/coller le contenu de ton fichier XSL et le résultat HTML ?

**pram** · 11/04/2003, 16h19

code xsl

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
<?xml version="1.0" encoding="ISO-8859-1"?>
<!-- edited with XML Spy v4.2 U (http://www.xmlspy.com) by pram (pram) -->
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:xslc="http://xslcomponents.org/TR/WD-xslc">
	<xsl:import href="xslc.xsl"/>
	<xsl:import href="Common.xsl"/>
	<xsl:template match="/">
		<xsl:apply-templates select="document"/>
	</xsl:template>
	<xsl:template match="document">
		<xsl:call-template name="xslc:Page">
			<xsl:with-param name="Title">Connexion</xsl:with-param>
			<xsl:with-param name="Body">
				<xsl:call-template name="xslc:TabControl">
					<xsl:with-param name="ActivePageName">Connexion</xsl:with-param>
					<xsl:with-param name="Tabs">
						<Tab Name="Connexion">
							<a href="{/document/Aliases/GestAbsDLL}Connexion">Connexion</a>
						</Tab>
					</xsl:with-param>
					<xsl:with-param name="Page">
						<xsl:call-template name="saisie"/>
					</xsl:with-param>
				</xsl:call-template>
			</xsl:with-param>
		</xsl:call-template>
	</xsl:template>
	<xsl:template name="saisie">
		<h4 align="center">Gestion individuelle du temps de travail</h4>
		<form name="MainForm" method="POST" action="{/document/Aliases/GestAbsDLL}ExtractionHORAIRES">
			<br/>
			<br/>
			<table border="0">
				<tr>
					<td align="left" valign="top">      Profil    </td>
					<td align="left" valign="top">
						<input type="text" name="User"/>
					</td>
				</tr>
				<tr>
					<td align="left" valign="top">     Mot de passe    </td>
					<td align="left" valign="top">
						<input type="password" name="Password"/>
					</td>
				</tr>
			</table>
			<br/>
			<br/>
			<br/>
			<xsl:call-template name="xslc:ButtonPad">
				<xsl:with-param name="ResetAction">
					<xsl:value-of select="/document/Aliases/GestAbsDLL"/>connexion</xsl:with-param>
			</xsl:call-template>
		</form>
	</xsl:template>
</xsl:stylesheet>

html généré

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
 
<html xmlns:xslc="http://xslcomponents.org/TR/WD-xslc" xmlns:msxsl="urn:schemas-microsoft-com:xslt"><head>
 
<base href="http://localhost/GestAbsBin/GestAbs.dll/"><link rel="stylesheet" type="text/css" href="/SharedPortal/Skins/msnblue/xslc.css"><meta http-equiv="Expires" content="0"><script language="javascript"><!--
var XMLC_SkinPath = '/SharedPortal/Skins/msnblue/';
var XMLC_Portal = '/SharedPortal/';
var XMLC_PictosPath = '/SharedPortal/Pictos/original/';
function handleFormKeyPress(form) { if (13 == event.keyCode) form.submit(); }
function ConfirmDelete(formName, DeleteAction, Prompt) {
  D = document.forms[formName];
  if (confirm(Prompt)) {
    D.action = DeleteAction;
    D.submit();
  }
}
--></script><script language="javascript" src="/SharedPortal/XRollover.js"></script><title>Connexion</title></head><body background="/SharedPortal/Skins/msnblue/background.gif"><!--XMLC_INSERT_COMMENTS--><table border="0" cellpadding="0" cellspacing="0" class="clTabControl" width="100%"><tr><td><img src="/SharedPortal/Skins/msnblue/spacer.gif" width="13" height="1" border="0"></td><td><img src="/SharedPortal/Skins/msnblue/spacer.gif" width="20" height="1" border="0"></td><td><img src="/SharedPortal/Skins/msnblue/spacer.gif" width="26" height="1" border="0"></td><td width="50000"><img src="/SharedPortal/Skins/msnblue/spacer.gif" width="7" height="1" border="0"></td><td><img src="/SharedPortal/Skins/msnblue/spacer.gif" width="13" height="1" border="0"></td><td><img src="/SharedPortal/Skins/msnblue/spacer.gif" width="1" height="1" border="0"></td></tr><tr><td><img src="/SharedPortal/Skins/msnblue/activetab_left.gif" width="13" height="31" border="0"></td><td background="/SharedPortal/Skins/msnblue/activetab_body.gif" class="clActiveTab" align="center" valign="middle" nowrap=""><a href="/GestAbsBin/GestAbs.dll/Connexion">Connexion</a></td><td><img src="/SharedPortal/Skins/msnblue/activetab_right.gif" width="26" height="31" border="0"></td><td colspan="2"><img src="/SharedPortal/Skins/msnblue/spacer.gif" width="20" height="1" border="0"></td><td><img src="/SharedPortal/Skins/msnblue/spacer.gif" width="1" height="1" border="0"></td></tr><tr><td><img src="/SharedPortal/Skins/msnblue/tab_bottom_left_first.gif" width="13" height="11" border="0"></td><td background="/SharedPortal/Skins/msnblue/activetab_bottom.gif"><img src="/SharedPortal/Skins/msnblue/spacer.gif" width="1" height="1" border="0"></td><td><img src="/SharedPortal/Skins/msnblue/activetab_bottom_right.gif" width="26" height="11" border="0"></td><td background="/SharedPortal/Skins/msnblue/main_top.gif"><img src="/SharedPortal/Skins/msnblue/spacer.gif" width="1" height="1" border="0"></td><td><img src="/SharedPortal/Skins/msnblue/main_top_right.gif" width="13" height="11" border="0"></td><td><img src="/SharedPortal/Skins/msnblue/spacer.gif" width="1" height="11" border="0"></td></tr><tr valign="top"><td background="/SharedPortal/Skins/msnblue/main_left.gif"><img src="/SharedPortal/Skins/msnblue/spacer.gif" width="1" height="35" border="0"></td><td background="/SharedPortal/Skins/msnblue/main_background.gif" colspan="3"><h4 align="center">Gestion individuelle du temps de travail</h4><form name="MainForm" method="POST" action="/GestAbsBin/GestAbs.dll/ExtractionHORAIRES"><br><br><table border="0"><tr><td align="left" valign="top">      Profil    </td><td align="left" valign="top"><input type="text" name="User"></td></tr><tr><td align="left" valign="top">     Mot de passe    </td><td align="left" valign="top"><input type="password" name="Password"></td></tr></table><br><br><br><table border="0" cellpadding="0" cellspacing="0" width="100%"><tr><td><a href="." onclick="document.MainForm.submit(); return false;"><img alt="Soumettre" border="0" onmouseover="ImgOver(this, '/SharedPortal/Skins/msnblue/button_submit');" onmouseout="ImgOut(this, '/SharedPortal/Skins/msnblue/button_submit');" onmousedown="ImgDown(this, '/SharedPortal/Skins/msnblue/button_submit');" src="/SharedPortal/Skins/msnblue/button_submit.gif"></a></td><td><a href="." onclick="reset(); return false;"><img alt="Annuler" border="0" onmouseover="ImgOver(this, '/SharedPortal/Skins/msnblue/button_reset');" onmouseout="ImgOut(this, '/SharedPortal/Skins/msnblue/button_reset');" onmousedown="ImgDown(this, '/SharedPortal/Skins/msnblue/button_reset');" onmouseup="ImgOver(this, '/SharedPortal/Skins/msnblue/button_reset');" src="/SharedPortal/Skins/msnblue/button_reset.gif"></a></td><td width="100%"></td></tr></table></form></td><td background="/SharedPortal/Skins/msnblue/main_right.gif"><img src="/SharedPortal/Skins/msnblue/spacer.gif" width="1" height="35" border="0"></td><td><img src="/SharedPortal/Skins/msnblue/spacer.gif" width="1" height="35" border="0"></td></tr><tr><td><img src="/SharedPortal/Skins/msnblue/main_bottom_left.gif" width="13" height="11"></td><td background="/SharedPortal/Skins/msnblue/main_bottom.gif" colspan="3"><img src="/SharedPortal/Skins/msnblue/spacer.gif" width="1" height="1"></td><td><img src="/SharedPortal/Skins/msnblue/main_bottom_right.gif" width="13" height="11"></td><td><img src="/SharedPortal/Skins/msnblue/spacer.gif" width="1" height="11" border="0"></td></tr></table></body></html>

**Nicolas.Cogi** · 11/04/2003, 17h26

Est-ce que tu as fait le delta entre le xsl et le html généré qui a le bon comportement et le xsl et html qui ne marche pas comme tu veux ?
La ou les différences entre les 2 devraient te permettre de comprendre pourquoi tu n'obtiens pas le même comportement.

**pram** · 15/04/2003, 09h13

j'ai fait le delta visuellement bien sur mais j'ai pas été plus loin. Je vais le faire mais comme j'ai pu contourner le pb j'ai un peu laissé tombé...

touche entrée dans formulaire

XMLRAD

Discussions similaires

Partager

Partager