Discussion :

[VVE]

Salut,

Je ne sais pas si je poste ce sujet dans le bon forum, mais bon, c'est un pb à cheval entre HTML, Javascript et ASPX...

J'explique :
Je développe une appli intranet en ASPX.

Sur plusieurs pages, j'ai des formulaires HTML qui permettent à l'utilisateur de modifier des champs dans ma BDD.

J'ai donc des zones de saisies pour lesquelles je veux brider la taille maxi autorisée (ie max 256 caractères).

Pour une zone de saisie mono ligne, .NET génère une balise HTML de ce type

Code :

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

<input name="txtObservations" type="text" maxlength="256">

Je veux des zones de saisies multi lignes. Dans ce cas .NET génère une balise HTML du type

Code :

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

<textarea name="txtObservations">

Malheureusement, pour les textarea, il n'y a pas de propriété maxlength.

J'ai donc imaginé de tronquer le texte saisi dans script côté client.

J'ai ajouté le JavaScript suivant :

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
 
// cette fonction permet de tronquer la longueur d'un champ de saisie multi-ligne
function TronqueLongueur(source, MaxLength)
{
	if (source.value.length > MaxLength)
	{
		// retrouve le nom du champ
		var pos_underscore = source.id.lastIndexOf("_");
		var nom_champ = source.id.substring(pos_underscore+1);
 
		// message d'avertissement
		if (confirm("Le texte du champ '" + nom_champ + "' est trop long (" + source.value.length + " car.).\n\nIl va etre tronque a une longueur de " + MaxLength + " caracteres."))
		{
			// tronque la valeur saisie
			source.value = source.value.substring(0, MaxLength);
		}
	}
}

Puis, j'ai ajouté la propriété onchange sur ma zone de saisie pour appeler mon script. En gros ça donne ça :

Code :

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

1
2
 
<textarea name="txtObservations" onchange="JavaScript:TronqueLongueur(this,256);">

Quand l'utilisateur saisit du texte trop grand dans la zone multi lignes, un message de confirmation s'affiche pour lui signifier que le texte va être tronqué à 256 caractères.

Ce message s'affiche au moment où le curseur quitte le champ de saisie. Par exemple, si l'utilisateur clique dans un autre champ.

Mon pb se situe au niveau d'un bouton SUBMIT.
En effet, lorsque l'utilisateur clique sur le bouton (typiquement pour VALIDER la saisie), le JavaScript se déclenche bien pour tronquer mon texte, mais si le popup CONFIRM s'est affiché, le reste de l'action (le submit) ne s'exécute pas => pas de validation de ma saisie côté serveur => pas d'insertion dans ma BDD...

Comment puis-je résoudre mon pb ?

Est-ce lié au popup ? Y-a-t'il une insctruction JavaScript à ajouter dans ma fonction TronqueLongueur ? Faut-il que j'appelle sur un autre évènement que onchange ?

Merci de votre aide

Vincent

[VVE]

Bon ben j'ai trouvé une solution de contournement :

J'ai ajouté la fonction JavaScript suivante :

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
 
// cette fonction permet de tronquer tous les champs TEXTAREA
function TronquerTous()
{
	var formulaire = document.forms[0];
 
	for (var i = 0; i < formulaire.elements.length; i++)
	{
		var controle = formulaire.elements[i];
		if (controle.type == "textarea")
		{
			TronqueLongueur(controle, controle.tag);
		}
	}
}

et sur le bouton submit j'ai appelé cette fonction pour tronquer tous les champs TEXTAREA du formulaire AVANT de valider. Ca donne à peu près ça :

Code :

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

<button type="submit" onmouseover="JavaScript:TronquerTous();">Valider</button>

Ainsi, avant le clic sur le bouton SUBMIT, tous les champs TEXTAREA sont tronqués. Par contre, je me base désormais sur la propriété TAG pour stocker la longueur maxi du texte.




Vincent

[SpaceFrog]

la balise form possède un evènement onsubmit ...
passe par cet évènement pour corriger la longueur du champs ...

[VVE]

Merci SpaceFrog pour ton tuyau.

Le pb, c'est qu'en fait je ne maîtrise pas la balise FORM

En effet, je développe en .NET => ma page est générée depuis une page ASPX => le bouton SUBMIT est en fait un ASP:BUTTON

Code :

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

<asp:button id="btnValider" onmouseover="JavaScript:TronquerTous();" runat="server" Text="Valider"></asp:button>

Et pour mes zones de saisies, au départ, je ne sais pas si c'est un INPUT de type TEXT ou bien une TEXTAREA car j'ajoute dans les deux cas des ASP:TEXTBOX

pour une zone de saisie mono ligne =

Code :

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

<asp:TextBox id="Categorie" width="100%" MaxLength="128" onchange="JavaScript:SetModificationEnCours();" runat="server"></asp:TextBox>

pour une zone de saisie multi ligne =

Code :

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

<asp:TextBox id="Observations" Width="100%" Height="60px" tag="256" onchange="JavaScript:TronqueLongueur(this,256);SetModificationEnCours();" TextMode="MultiLine" runat="server"></asp:TextBox>

Dommage, j'aurais bien testé ton idée pour voir si le fait d'avoir le popup CONFIRM affiché par le JavaScript au moment du ONSUBMIT permettait de poursuivre l'action d'envoi côté serveur...

[franculo_caoulene]

En .NET tu peux utiliser un bouton html, lui donner comme attribut runat="server" et le déclarer dans le code behind avec un (syntaxe VB.NET)

Code :

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

Protected WithEvents bouton As System.Web.UI.HtmlControls.HtmlInputButton

Ainsi tu peux utiliser la méthode de SpaceFrog.

Et de toute façon tu peux ajouter un attribut à ta balise form en code-behind avec

Code :

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

monForm.attributes.add("onsubmit", "mafonction JS"))

Pour finir t'as les validators pour ça.

Mais là, c'est du .NET

[VVE]

Ouaip, mais mon pb n'était pas sur le bouton, mais sur le formulaire.

J'ai réussi à ajouté une propriété HTML (en fait un évènement) à mon ASP:BUTTON, mais je n'ai pas trouvé comment jouer sur la balise FORM (et l'évènement ONSUBMIT) qui est générée à partir de la page ASPX .

Mais c'est vrai que je suis autodidacte (et débutant) le développement type web et .NET. J'imagine peut-être des solutions compliquées alors qu'il y a plus simple...

[VVE]

Tu as ajouté ton code

Code :

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

1
2
 
MonForm.attributes.add()...

à l'occasion j'essayerais, mais pour l'instant, je reste sur ma solution (je dois passer à un autre bug)...

Merci bcp de vos messages

[SpaceFrog]

un petit exemple ...
à priori il attend bien la validation de l'alert pour envoyer le form ...

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script type='text/javascript'>
function verif(){
if(document.getElementById('saisie').value.length>10){alert('saisie trop longue')}
}
</script>
</head>
 
<body>
<form onsubmit="verif()" action="javascript:alert('c\'est parti')"/>
<textarea id="saisie"></textarea>
<input type="submit" value="valider" />
</form>
</body>
</html>

sinon il suffit de faire retourner true ou false à la fonction ...

[VVE]

merci pour ton petit code à tester.

J'ai intégré ma fonction TronqueLongueur

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
 
<head>
<script type='text/javascript'> 
function TronqueLongueur(source, MaxLength)
{
	if (source.value.length > MaxLength)
	{
		// retrouve le nom du champ
		var pos_underscore = source.id.lastIndexOf("_");
		var nom_champ = source.id.substring(pos_underscore+1);
 
		// message d'avertissement
		if (confirm("Le texte du champ '" + nom_champ + "' est trop long (" + source.value.length + " car.).\n\nIl va etre tronque a une longueur de " + MaxLength + " caracteres."))
		{
			// tronque la valeur saisie
			source.value = source.value.substring(0, MaxLength);
		}
	}
}
 
</script> 
</head> 
 
<body> 
<form  onsubmit="TronqueLongueur(document.getElementById('saisie'),10)" action="javascript:alert('c\'est parti')"/> 
<textarea id="saisie"></textarea> 
<input type="submit" value="valider" /> 
</form> 
</body> 
</html>

Ca semble fonctionner, mais comment "intercepter" la réponse ANNULER de l'utilisateur pour stopper le submit ?


J'ai essayé

SI confirm('blabla') ALORS return vrai SINON return faux

mais visiblement ça passe quand même dans le script d'action.

N'y aurait-il pas un moyen de mettre un flag "Cancel" à 1 ?


:

[SpaceFrog]

dans le onsubmit tu mets un return et tu fais envoyer un resultat true ou false à la focntion...

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
function verif(){
if(document.getElementById('saisie').value.length>10){var goOn=confirm('voulez vous continuer')
return goOn;}
}
</script>
</head>
 
<body>
<form onsubmit="return verif()" action="javascript:alert('c\'est parti')"/>
<textarea id="saisie"></textarea>
<input type="submit" value="valider" />
</form>

[VVE]

merci SpaceFrog,

Ca marche.

Je vais essayer de mettre en place cette solution dans mon .NET

Code :

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

1
2
 
MonForm.attributes.add("onsubmit","return verif()")

8)