Comment forcer la page à s'afficher au niveau d'un champ de saisi

Bonjour à tous chers "alsacréateurs",

Je souhaite qu'après avoir récupéré l'élément d'un des champ d'un formulaire et si celui-ci est vide, le focus soit affecté à ce champ.

Voici le code de mon formulaire :

echo '<form name="upload" action="ressources.php" method="post" enctype="multipart/form-data">'."\n";
  echo '<input type="file" name="fichier_ressource">'."\n";
  echo '<a href="#" id="ajouterFichier">ajouter mon fichier</a>'."\n";
  echo '<input type="hidden" name="item_id" value="5" />'."\n";
  echo '<input type="hidden" name="validation" value="ok" />'."\n";
  echo '<input type="hidden" name="chemin" value="'.$chemin.'" />'."\n"; echo '</form>'."\n";

Voici mon code javascript :

if (fichier.length!=0)
{
   document.forms["upload"].elements["fichier_ressource"].focus();
}

Mais hélas, cela ne fonctionne pas alors que j'ai trouvé cette méthode sur tout javascript.com avec exemple qui fonctionne à l'appui.

Où est mon erreur ? Que dois-je faire ?

Merci par avance.
Modifié par manu_css (23 Jun 2007 - 12:55)

Salut ,

je ne comprends pas 2 choses : comment ton formulaire est-il soumis et comment ta fonction javascript est-elle appelée ?

A+

a écrit :

je ne comprends pas 2 choses : comment ton formulaire est-il soumis et comment ta fonction javascript est-elle appelée ?

Mon formulaire est soumis via javascript avec une fonction qui est appelé lors du clic du lien. C'est le même principe que la fonction suivante :

document.NomFormulaire.submit();

De plus, lorsque le lien est cliqué, c'est là que je récupère le contenu du champ et que je vérifie s'il n'est pas vide (j'ai fait ce choix pour obliger l'utilisateur à activer javascript et m'éviter de doubler les contrôles en les faisant à nouveau coté serveur)

manu_css a écrit :
(j'ai fait ce choix pour obliger l'utilisateur à activer javascript et m'éviter de doubler les contrôles en les faisant à nouveau coté serveur)

Là, il n'y a qu'un mot: "perdu !"

(C'est à dire: aller en prison, passer deux tours le temps de se documenter sur la question, puis revenir à la case départ sans toucher les 10 000 FF, mais avec l'estime générale: c'est une erreur fondamentale, mais courante: le processus doit être au contraire fondé sur un traitement côté serveur, allégé lorsque possible via un pré-traitement côté client. Le traitement de mes données en entrée est quelque-chose de beaucoup trop important pour m'en remettre uniquement au client).
Modifié par Laurent Denis (23 Jun 2007 - 11:34)

C'est bien ce qu'il me semblait, je m'attendais à cette réaction. Comment l'utilisateur peut-il valider un formulaire s'il n'y a pas de bouton submit ?


Sinon je n'ai toujours pas eu de réponse à ma question (cf mon premier post)

Re'

Ben en même temps tu es sur un forum qui parle d'accessibilité alors ce serait assez étrange de "t'aider à faire le mal"

Je t'invite à commencer par faire une recherche sur onsubmit...

A+

*Edit: je rejoins Laurent pour dire qu'il faut avant tout faire tes contrôles côté serveur. Dans ton cas il suffit de mettre dans ta page ressources.php :

if (!isset($_FILES['filename'])) {
	header ("location: page_formulaire?msg_erreur=1");
}

et de traiter la variable msg_erreur pour afficher un message et éventuellement rajouter un focus...
Modifié par Heyoan (23 Jun 2007 - 11:52)

Juste pour aider un peu, quand même: on met tojours un bouton submit dans son formualire. Toujours. Fonctionnel, idnpensable, évident, simple, pas coûteux, et sécurisant.

Après, évidemment, si on met des turlututus javascript, on peut toujours l'enlever au passage via javascript, le bouton. Mais on l'enlève au moment idoine dans les conditions idoines. Il restera là dans les autres, sans qu'on ait rien à faire

<edit>j'aime bien l'idée de turlututus javascript, tiens... </>
Modifié par Laurent Denis (23 Jun 2007 - 11:53)

Je suis d'accord que là ça pose un pb d'accessibilité, mais c'est pour un site intranet très réduit. d'habitude je prend très au sérieux les problèmes d'accessibilité. Mais j'ai besoin de votre aide car je réutiliserai le focus pour mon site perso qui lui prend en compte l'accessibilité (pas de menu javascript, tout le désign est fait pas css donc pas d'image dans le HTML, contrôle effectué coté client ET coté serveur (surtout).

Sinon, j'ai regardé onsubmit, mais je voudrais comprendre pourquoi ma première solution ne fonctionne pas. Il était dit sur le site "toutjavascript", je cite "cela fonction avec n'importe quel champ !"

En fait, je souhaite affecter le focus au champ du formulaire vide pour que l'utilisateur n'ait pas à dérouler la page après clic. Donc c'est dans un soucis de confort pour l'utilisateur et ça ne pose aucun pb d'accessibilité si je ne gère pas la validation du formulaire via javascript (ce qui est prévu).

Merci de votre compréhension.

Bon allez !

Comme je suis en vacances et donc d'excellente humeur un extrait de turlututu javascript qui date un peu mais qui fonctionne :

[b]*Edit:[/b] code supprimé car inutile pour ce topic et périmé

A+
Modifié par Heyoan (23 Jun 2007 - 13:01)

Bon et bien, je viens de trouver pourquoi cela ne fonctionnait pas.

Apparemment il n'est pas possible de donner le focus à un champ de type "file" ce qui me parait logique puisque ce champ génère un bouton parcourir qui permet de sélectionner le fichier à uploader.

cette méthode simple permet de donner le focus :

document.getElementById("ici l'id de l'objet").focus();

Donc j'ai toujours mon problème initial. Je pensais qu'en donnant le focus à un champ, la page s'affichait directement au niveau du focus mais il n'en est rien. Alors comment forcer la page à s'afficher au niveau d'un champ de saisi ?

Je modifie tout de suite le nom du post pour plus de clarté.

Re',

une solution que j'utilise dans ce cas est de créer une ancre (du style <a name = 'focus1'></a>) juste avant le champ et de rajouter un location.href="#focus1"; avant le xxx.focus. Mais cette technique est peut-être elle aussi un peu périmée
Modifié par Heyoan (23 Jun 2007 - 13:07)

a écrit :

C'est bien ce qu'il me semblait, je m'attendais à cette réaction. Comment l'utilisateur peut-il valider un formulaire s'il n'y a pas de bouton submit ?

Tout simplement en appuyant sur entrée...
Et il est toujours possible d'envoyer des requêtes HTTP par socket et/ou par telnet directement... sans considération aucune pour le HTML et le js.

Bref, c'est en ne vérifiant pas les données reçues qu'on se prend des pirates dans les dents. Réseau fermé ou pas, je prendrais mes précautions.

Heyoan, j'ai essayé ta solution mais cela ne fonctionne pas.


Code javascript

location.href='#test';

et bizarrement, dans l'url, j'obtient :
http://localhost/ressources.php#

Le mot "test" n'aparait pas après le caractère "#" dans l'URL ! Du coup, ça ne se positionne pas sur l'ancre. Pourquoi ?

Sinon, j'ai fait d'autre recherche et je dois dire que je ne trouve rien sur la façon d'atteindre une ancre avec javascript. Des idées ?
Modifié par manu_css (23 Jun 2007 - 14:38)

Salut,

Un exemple :

<!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>Ajout Vote</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
function verif(){
	location.href="#focus2";
	document.getElementById("zone2").focus();
	alert("La zone 2 est incorrecte !");
	return false;	
}
</script>	
</head>
<body>
<form action="#" onsubmit="return verif()">
<a name = 'focus1'></a>
<input id="zone1" type="text" />
<input id="submit" type="submit" value="Envoyer" />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<a name = 'focus2'></a>
<input id="zone2" type="text" />
</form>
</body>
</html>

A+