Forum |  HardWare.fr | News | Articles | PC | Prix | S'identifier | S'inscrire | Shop Recherche
517 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  [HTML/CSS]Submit d'un form (touche entrée) avec bouton submit perso?

 



 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

[HTML/CSS]Submit d'un form (touche entrée) avec bouton submit perso?

n°1358380
Yoyo@
Posté le 03-05-2006 à 10:46:32  profilanswer
 

Salut,
 
Je dipose dans une page web d'un formulaire, dont le bouton submit est en fait un lien <a> (avec image en arrière plan), et dont le click entraîne la soumission d'un formulaire, grace à du Javascript onclick="..." )
 
J'utilise ce type de technique pour avoir un bouton changeant d'apparence lors du passage de la souris, grâce à une feuille de style css.
 
Le problème, c'est que le fait d'appuyer sur Entrée ne soumet pas la form, comme c'est le cas avec un vrai bouton Submit.
 
Je me demande donc s'il existe un moyen de forcer la soumission du formulare avec le buton entrée du clavier?
 
Merci.

mood
Publicité
Posté le 03-05-2006 à 10:46:32  profilanswer
 

n°1358406
boulax
Inserer phrase hype en anglais
Posté le 03-05-2006 à 11:09:24  profilanswer
 

Bah oui, en mappant l'evenement "onkeypress sur la touche entrée" avec ta fonction js de submit.

n°1358408
0x90
Posté le 03-05-2006 à 11:10:53  profilanswer
 

Ca va être pratique tout ca si on a pas le js d'activé / de dispo :s


---------------
Me: Django Localization, Yogo Puzzle, Chrome Grapher, C++ Signals, Brainf*ck.
n°1358409
anapajari
s/travail/glanding on hfr/gs;
Posté le 03-05-2006 à 11:10:58  profilanswer
 

sinon ptet(jamais testé c'est juste une idée) en rusant en mettant un submit sans display en css ...

n°1358412
Yoyo@
Posté le 03-05-2006 à 11:15:19  profilanswer
 

Merci pour vos réponses.
 
Je réponds dans l'ordre:
-boulax: est ce que tu pourrais développer? Le onkeypress, je l'applique à qui? A mon <a>?
-0x90: de toutze manière, j'impose déja à mes utilisateurs d'avoir JS, vu la manière d'ont j'implémente mes boutons changeant d'état lorsque la souris passe dessus (c'est un lien <a> donc, je suis obligé d'utiliser js pour que ce lien lance le form submit sur click
-anapajari: tu parles de mettre un "display: none"? L'idée parait séduisante, mais je ne sais pas si les browsers vont recevoir des évênements pour des controles non visibles? Ca vaut le coup d'être tenté!

n°1358426
boulax
Inserer phrase hype en anglais
Posté le 03-05-2006 à 11:21:29  profilanswer
 

Yoyo@ a écrit :

Merci pour vos réponses.
 
Je réponds dans l'ordre:
-boulax: est ce que tu pourrais développer? Le onkeypress, je l'applique à qui? A mon <a>?


A ton document:
(truc dans le genre, pas testé donc à vérifier)


function onLoadDo()
{
     document.onkeypress = "function () { if ( event.keycode == 13 ) { doSubmit(); } }";
}
 
<body onload="onLoadDo()">

n°1358435
Yoyo@
Posté le 03-05-2006 à 11:27:52  profilanswer
 

boulax a écrit :

A ton document:
(truc dans le genre, pas testé donc à vérifier)


function onLoadDo()
{
     document.onkeypress = "function () { if ( event.keycode == 13 ) { doSubmit(); } }";
}
 
<body onload="onLoadDo()">



 
Ah oui, ça me plait bien ça! Bien entendu, ça va faire un appel de fonction supplémentaire (le gestionnaire d'évênements", à chaque fois que l'utilisateur appuis ne serait ce que sur une touche, mais bon, c'est fait du coté client, donc pas de problème.
 
Par contre, même si je ne suis pas pro du JS, je ne vois pas pourquoi je devrais mettre le truc dans un body onload?
 
Ne pourrais-pas simplement inclure une balise du genre au début de ma page HTML:
 

<script>
  document.onkeypress = "function () { if ( event.keycode == 13 ) { doSubmit(); } }";  
</script>


 

n°1358436
boulax
Inserer phrase hype en anglais
Posté le 03-05-2006 à 11:28:55  profilanswer
 

Oui ça devrait marcher aussi ;)

n°1358443
Yoyo@
Posté le 03-05-2006 à 11:33:02  profilanswer
 

Merci alors ;)
 
Je vais quand mête tenter le coup du controle avec un display: none (ou un visibility: hidden) suggérée par anapajari, par cusriosité! Et je reviendrai poster si jamais ça marche (mais j'ai des doutes)

n°1358859
Yoyo@
Posté le 03-05-2006 à 16:54:37  profilanswer
 

Bon, me voilà de retour...
 
En fait, même si l'idée était bonne, la syntaxe proposée l'était moins.
 
D'autre part, j'ai dû rajouter quelques modifs au code pour le rendre compatibleavec IE et Firefox à la fois.
 
Voici donc ce à quoi j'arrive, et ça marche parfaitement:
 

Code :
  1. <script language="Javascript">
  2. document.onkeypress = function (e) {
  3.  var enterpressed = e? e.which == 13: window.event.keyCode == 13;
  4.  if (enterpressed){
  5.   document.myform.submit();
  6.   return false;
  7.  }
  8. }
  9. </script>


 
Merci pour votre aide!

mood
Publicité
Posté le 03-05-2006 à 16:54:37  profilanswer
 

n°1358872
Yoyo@
Posté le 03-05-2006 à 17:07:14  profilanswer
 

Et pour en revenir à l'idée de anapajari, j'ai essayé d'inclure l'élément suivant:
 

Code :
  1. <input type="submit" style="display: none; " />


 
Et ça marche...mais seulement avec Firefox, pas avec IE. Vraiment dommage, car c'était encor ele plus propre...

n°1358873
anapajari
s/travail/glanding on hfr/gs;
Posté le 03-05-2006 à 17:08:24  profilanswer
 

tiens no js et ça marche sous IE et FF:

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2.   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
  4. <head>
  5.   <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
  6.   <title>Test</title>
  7. </head>
  8. <body >
  9.   <form action="pouet.php" method="post">
  10.     <input type="text" name="inp1"/>
  11.     <input type="text" name="inp1"/>
  12.     <input type="text" name="inp3"/>
  13.     <input type="text" name="inp1"/>
  14.     <input style="font-size:0px; width:0px; height:0px;border:0px;padding:0px;" type="submit" value="" name="sub"/>
  15.   </form>
  16. </body>
  17. </html>

n°1359152
Yoyo@
Posté le 04-05-2006 à 07:42:18  profilanswer
 

Alors, effectivement, ça marche, mais il faut que le button submit avec dimensions nulles soit sur la même ligne qu'un autre contrôle, car si tu le mets seul sur sa ligne, il prend de la place sous IE (mais aps sous Firefox)
 
Mais je pense que je préfère quand même la solution JS, car de toute manière, mon "bouton submit" se fait comme je le disais sous forme d'un lien <a> qui renvoie donc sur une fonction JS de soumission de form (pas de le choixpour faire en sorte qu'un <a> soumette la form....

n°1359219
anapajari
s/travail/glanding on hfr/gs;
Posté le 04-05-2006 à 09:32:01  profilanswer
 

Yoyo@ a écrit :

Mais je pense que je préfère quand même la solution JS, car de toute manière, mon "bouton submit" se fait comme je le disais sous forme d'un lien <a> qui renvoie donc sur une fonction JS de soumission de form (pas de le choixpour faire en sorte qu'un <a> soumette la form....


Pis le jour ou tu as deux formulaires sur ta page tu l'as dans le ... :o

n°1359232
Yoyo@
Posté le 04-05-2006 à 09:40:16  profilanswer
 

Effectivement, j'ai pensé au problème que j'aurai si j'avais deux formulaires... Ce n'est pas encore le cas.
 
Mais je m'imagine qu'il doit être possible, lorsque je suis dans mon gestionnaire d'évênement, de savoir sur quel contrôle j'étaiss avant d'appyer sur Entrée?
Si ce n'est pas le cas, alors je devrais utiliser ce faux "Submit"...


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  [HTML/CSS]Submit d'un form (touche entrée) avec bouton submit perso?

 

Sujets relatifs
Changer police des liens htmlEncoder en html
Petit soucis html et CSS avec DreamweaverCSS firefox/IE et résolution....
Convertir couleur HTML en format 0x [PHP] Extraire les liens http dans un code source html
Pb PhpMyvisites sur mon site persoCSS: espace entre 2 boites contenues
Appel d'une page HTML ? 
Plus de sujets relatifs à : [HTML/CSS]Submit d'un form (touche entrée) avec bouton submit perso?


Copyright © 1997-2018 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR