Utilisez un lien normal pour soumettre un formulaire

130

Je souhaite soumettre un formulaire. Mais je ne vais pas utiliser un bouton d'entrée avec un type de soumission, mais un lien.

L'image ci-dessous montre pourquoi. J'utilise des liens d'image pour enregistrer / soumettre le formulaire. Comme j'ai un balisage css standard pour les liens d'image, je ne veux pas utiliser les boutons d'envoi d'entrée.

J'ai essayé d'appliquer onClick = "document.formName.submit ()" à l'élément a mais je préférerais une méthode html.

texte alternatif

Des idées?

Vote favorable
la source
3
utiliser le bouton et le css pour afficher l'image ou utiliser javascript, il n'y a pas de moyen réel de faire simple href pour soumettre un formulaire sans javascript.
Anton S du
Je seconde cela, malheureusement, ce n'est pas un moyen facile sans JavaScript
benhowdle89
4
Votre raison de faire cela ressemble à une fausse économie. Mieux vaut simplement créer un css standard pour les boutons d'envoi et utiliser les formulaires tels qu'ils ont été conçus pour être utilisés. Il y a un tas de boutons techniques css décrire ici: tripwiremagazine.com/2009/06/...
dnagirl

Réponses:

169

Deux manières. Créez un bouton et stylisez-le pour qu'il ressemble à un lien avec css, ou créez un lien et utilisez onclick="this.closest('form').submit();return false;".

Jan Sverre
la source
55
Aaaaaaa et voici une référence sur la façon de styliser un bouton en tant que lien: stackoverflow.com/questions/1367409/…
flipchart
3
notez que form.submit()cela ne fonctionnera pas sans JavaScript
baptx
3
@baptx même les vieux téléphones intelligents ont activé javascript
Mahdi Jazini
2
@MahdiJazini beaucoup de gens désactivent JavaScript par défaut, ce qui peut être intrusif et affecter les performances dans certains cas. Si JavaScript échoue, il peut casser l'ensemble du site Web (par exemple en utilisant un CDN sans secours local et le domaine tiers est bloqué). S'il y a une erreur HTML, vous pouvez toujours utiliser le site Web. Les développeurs devraient plutôt suivre le principe de l'amélioration progressive.
baptx
3
Si vous souhaitez prendre en charge les utilisateurs sans javascript, utilisez la première option décrite dans cette réponse, stylisez un bouton comme un lien. Par exemple input[type=submit].link { border: none; background: none; display: inline; color: blue; text-decoration: underline; }et<input type=submit class="link" />
Jan Sverre
87

Vous ne pouvez pas vraiment faire cela sans une forme de script au meilleur de ma connaissance.

<form id="my_form">
<!-- Your Form -->    
<a href="javascript:{}" onclick="document.getElementById('my_form').submit(); return false;">submit</a>
</form>

Exemple d' ici .

JonVD
la source
1
et chers visiteurs ... n'oubliez pas de définir le >>> id = "my_form" c'est id pas le nom: D
Mahdi Jazini
Cela devrait être la meilleure réponse explicite, merci!
yehanny
28

Juste un style input type="submit"comme celui-ci a fonctionné pour moi:

.link-button { 
     background: none;
     border: none;
     color: #0066ff;
     text-decoration: underline;
     cursor: pointer; 
}
<input type="submit" class="link-button" />

Testé dans Chrome, IE 7-9, Firefox

Serj Sagan
la source
juste pour mémoire: vous devez sélectionner l' inputélément approprié à l' aide des sélecteurs CSS sans attacher de classe à l'élément HTML.
Erik Kaplun
Bien que votre commentaire soit le moyen préféré, ce n'est pas toujours possible
Serj Sagan
Pourquoi est-ce la méthode préférée?
Mark
C'est une pratique de codage semi-établie, qui laisse généralement un html plus propre ... mais ce n'est pas un gros problème
Serj Sagan
1
Cette réponse ne dépend pas non plus de JavaScript, ce qui est une chose de moins à craindre
Matthew Lock
10

Vous utilisez des images à soumettre .. vous pouvez donc simplement utiliser un type="image""bouton" d'entrée:

<input type="image" src="yourimage.png" name="yourinputname" value="yourinputvalue" />
ThiefMaster
la source
1
... ou un <button>élément contenant un <img/>élément.
DanMan
Voici le lien MDN pour cela au cas où quelqu'un d'autre voudrait une source: developer.mozilla.org/en-US/docs/Web/HTML/Element/input/image
Sam
5

utilisation:

<input type="image" src=".."/>

ou:

<button type="send"><img src=".."/> + any html code</button>

plus quelques CSS

atlavis
la source
0

Décidément, il n'y a pas de solution avec du HTML pur pour soumettre un formulaire avec une abalise link ( ). Le HTML standard n'accepte que des boutons ou des images. Comme l'ont dit d'autres collaborateurs, on peut simuler l'apparence d'un lien à l'aide d'un bouton, mais je suppose que ce n'est pas le but de la question.

IMHO, je crois que la solution proposée et acceptée ne fonctionne pas.

Je l'ai testé sur un formulaire et le navigateur n'a pas trouvé la référence au formulaire.

Il est donc possible de le résoudre en utilisant une seule ligne de JavaScript, en utilisant thisobject, qui fait référence à l'élément sur lequel on clique, qui est un nœud enfant du formulaire, qui doit être soumis. Il en this.parentNodeva de même pour le nœud de formulaire. Après, il suffit d'appeler la submit()méthode sous cette forme. Il n'y a pas de recherche nécessaire à partir du document entier pour trouver le bon formulaire.

<form action="http://www.greatsolutions.com.br/indexint.htm"                   
   method="get">
    <h3> Enter your name</h3>
    First Name <input type="text"  name="fname"  size="30"><br>
    Last Name <input type="text" name="lname" size="30"><br>
    <a href="#" onclick="this.parentNode.submit();"> Submit here</a>
</form>

Supposons que j'entre avec mon propre nom:

Formulaire rempli

J'ai utilisé l' getattribut de méthode de formulaire car il est possible de voir les bons paramètres dans l'URL à la page chargée après l'envoi.

http://www.greatsolutions.com.br/indexint.htm?fname=Paulo&lname=Buchsbaum

Cette solution s'applique évidemment à toute balise qui accepte l' onclickévénement ou un événement similaire.

thisest un excellent choix pour récupérer le contexte avec une eventvariable (disponible dans tous les principaux navigateurs et à partir d'IE9) qui peut être utilisée directement ou passée comme argument à une fonction.

Dans ce cas, remplacez la ligne par atag par la ligne ci-dessous, en utilisant la propriété target, qui indique l'élément qui a déclenché l'événement.

<a href="#" onclick="event.target.parentNode.submit();"> Submit here</a>
Paulo Buchsbaum
la source
@Nathan, je n'ai pas beaucoup l'habitude d'écrire Stackoverflow. J'espère que vos corrections m'aideront à améliorer mon style. Mon anglais n'est pas bon non plus.
Paulo Buchsbaum
0

vous pouvez utiliser OnClick = "document.getElementById ('formID_NOT_NAME'). SUBMIT ()"

Sameh Helaly
la source