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

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

Marsh Posté le 03-05-2006 à 10:46:32    

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.

Reply

Marsh Posté le 03-05-2006 à 10:46:32   

Reply

Marsh Posté le 03-05-2006 à 11:09:24    

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

Reply

Marsh Posté le 03-05-2006 à 11:10:53    

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.
Reply

Marsh Posté le 03-05-2006 à 11:10:58    

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

Reply

Marsh Posté le 03-05-2006 à 11:15:19    

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é!

Message cité 1 fois
Reply

Marsh Posté le 03-05-2006 à 11:21:29    

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()">

Message cité 1 fois
Reply

Marsh Posté le 03-05-2006 à 11:27:52    

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>


 

Reply

Marsh Posté le 03-05-2006 à 11:28:55    

Oui ça devrait marcher aussi ;)

Reply

Marsh Posté le 03-05-2006 à 11:33:02    

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)

Reply

Marsh Posté le 03-05-2006 à 16:54:37    

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!

Reply

Marsh Posté le 03-05-2006 à 16:54:37   

Reply

Marsh Posté le 03-05-2006 à 17:07:14    

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

Reply

Marsh Posté le 03-05-2006 à 17:08:24    

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>

Reply

Marsh Posté le 04-05-2006 à 07:42:18    

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

Message cité 1 fois
Reply

Marsh Posté le 04-05-2006 à 09:32:01    

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

Reply

Marsh Posté le 04-05-2006 à 09:40:16    

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"...

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed