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

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : [HTML/CSS]Submit d'un form (touche entrée) avec bouton submit perso?

Yoyo@

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.

Publicité

boulax

Inserer phrase hype en anglais

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

0x90

→

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.

anapajari

s/travail/glanding on hfr/gs;

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

Yoyo@

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

boulax

Inserer phrase hype en anglais

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

Yoyo@

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:

boulax

Inserer phrase hype en anglais

Oui ça devrait marcher aussi

Yoyo@

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)

Yoyo@

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 :

<script language="Javascript">
document.onkeypress = function (e) {
var enterpressed = e? e.which == 13: window.event.keyCode == 13;
if (enterpressed){
document.myform.submit();
return false;
}
}
</script>

Merci pour votre aide!

Publicité

Yoyo@

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

Code :

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

anapajari

s/travail/glanding on hfr/gs;

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

Code :

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

Yoyo@

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

anapajari

s/travail/glanding on hfr/gs;

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

Yoyo@

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

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 html	Encoder en html
Petit soucis html et CSS avec Dreamweaver	CSS 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 perso	CSS: 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?

Page générée en 0.038 secondes