2010-11-26 3 views
98

Je veux soumettre un formulaire. Mais je ne vais pas la façon basique d'utiliser un bouton d'entrée avec un type de soumission mais un lien un .Utilisez un lien normal pour soumettre un formulaire

L'image ci-dessous montre pourquoi. J'utilise des liens d'image pour enregistrer/soumettre le formulaire. Parce que j'ai le balisage standart css pour les liens d'image, je ne veux pas utiliser les boutons de soumission 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.

alt text

Toutes les idées?

+3

bouton utilisation et css pour afficher l'image ou utiliser javascript, il n'y a pas de véritable moyen pour faire simple href de soumettre un formulaire sans javascript. –

+0

je seconde que, malheureusement, ce n'est pas un moyen facile sans javascript – benhowdle89

+3

Votre raison de faire cela ressemble à une fausse économie. Mieux vaut juste venir avec un CSS standard pour soumettre des boutons et utiliser des formulaires de la façon dont ils ont été conçus pour être utilisés. Il y a un tas de techniques de bouton css décrites ici: http://www.tripwiremagazine.com/2009/06/24-essential-submit-button-enhancements.html – dnagirl

Répondre

141

Deux façons. Soit créer un bouton et le style de sorte qu'il ressemble à un lien avec CSS, ou créer un lien et utiliser onclick="form.submit();".

+43

Aaaaaaaand voici une référence pour savoir comment styliser un bouton en tant que lien : http://stackoverflow.com/questions/1367409/how-to-make-button-look-like-a-link – flipchart

+3

Notez que 'form.submit()' ne fonctionnera pas sans JavaScript – baptx

+2

@baptx même vieux téléphones intelligents ont activé javascript –

9

Vous utilisez des images pour présenter .. et vous pouvez simplement utiliser un « bouton » d'entrée type="image":

<input type="image" src="yourimage.png" name="yourinputname" value="yourinputvalue" /> 
+1

... ou un élément '

+0

Voici le lien MDN pour cela dans le cas où quelqu'un d'autre voulait une source: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/image – Sam

76

Vous ne pouvez pas vraiment faire cela sans une certaine 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 de Here.

+4

merci pour cette excellente réponse !! – soField

+1

et chers visiteurs ... n'oubliez pas de mettre le >>> id = "mon_form" c'est pas nom: D –

3

utilisation:

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

ou:

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

plus quelques CSS

23

styling Juste une <input type="submit" class="linkButton" /> comme ça a fonctionné pour moi:

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

Testé dans Chrome, IE 7-9, Firefox

+0

juste pour l'enregistrement: vous devez sélectionner l'élément 'input' approprié en utilisant des sélecteurs CSS sans attacher une classe à l'élément HTML. –

+0

Bien que votre commentaire soit le moyen préféré, ce n'est pas toujours possible. –

+0

Pourquoi est-ce le moyen préféré? – Mark

-1

Certainement, il n'y a pas de solution avec HTML pur pour soumettre un formulaire avec une étiquette lien (a). Le HTML standard n'accepte que des boutons ou des images. Comme l'ont dit d'autres collaborateurs, on peut simuler l'apparition d'un lien en utilisant un bouton, mais je suppose que ce n'est pas le but de la question.

À mon humble avis, 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 l'objet this, qui référence l'élément sur lequel on clique, qui est un noeud enfant du formulaire, qui doit être soumis. Donc this.parentNode est le nœud de formulaire. Après il appelle simplement la méthode submit() sous cette forme. Ce n'est pas une recherche nécessaire de l'ensemble du document 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 je rentre avec mon propre nom:

Filled form

Je l'ai utilisé get dans l'attribut de méthode formulaire, car il est possible de voir les bons paramètres dans l'URL à la page chargée après soumettre .

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

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

this est un excellent choix pour récupérer le contexte avec event variable (disponible dans tous les principaux navigateurs et à partir de IE9) qui peut être utilisé directement ou transmis en tant qu'argument à une fonction.

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

<a href="#" onclick="event.target.parentNode.submit();"> Submit here</a> 
+0

@Nathan, je n'ai pas beaucoup d'habitude d'écrire dans 'Stackoverflow'. J'espère que vos corrections m'aident à améliorer mon style. Mon anglais n'est pas bon non plus. –

0

vous pouvez utiliser onclick = "document.getElementById ('formID_NOT_NAME'). SOUMETTRE()"

Questions connexes