493 votes

Soumettre le formulaire en utilisant un bouton en dehors de la balise <form>.

Dis que je l'ai fait :

<form method="get" action="something.php">
    <input type="text" name="name" />
</form>

<input type="submit" />

Je pense qu'en HTML5, il y a un attribut action pour le bouton submit, mais je ne suis pas sûr que ce soit totalement compatible avec les navigateurs et si ce n'est pas le cas, y a-t-il un moyen de le faire ?

2 votes

Je ne pense pas que vous puissiez le faire sans javascript. Comment le navigateur saura-t-il de quel formulaire il s'agit ? Il pourrait y en avoir plusieurs. Pourquoi ne pouvez-vous pas placer le bouton d'envoi à l'intérieur du formulaire ?

1 votes

Si vous ne voulez pas utiliser JS alors pour moi cela semble impossible en html(<5), juste par curiosité, pourquoi auriez-vous ce genre d'arrangement dans le code ?

1 votes

J'ai une zone de paramètres à onglets multiples avec un bouton pour tout mettre à jour. En raison de sa conception, le bouton doit se trouver en dehors du formulaire. Je vais me contenter de l'option HTML5 ou d'une solution JS, car cette question semble être redondante.

953voto

Lie Ryan Points 24517

En HTML5, il y a l'attribut de formulaire . En gros,

<form id="myform" method="get" action="something.php">
    <input type="text" name="name" />
</form>

<input type="submit" form="myform" />

42 votes

Cela ne fonctionne pas sur IE pour ceux qui prévoient de l'utiliser. Je l'ai utilisé mais j'ai ensuite décidé d'ajouter une fonction de rappel de l'événement submit pour soumettre manuellement le formulaire sur les navigateurs IE.

1 votes

Quelles versions d'IE exactement ?

13 votes

J'ai fait ça comme une solution de repli : <button type="submit" form="frmFoo" onclick="!this.form&&$('#'+$(this).attr('form')).submit()"> Comme les expériences l'ont révélé, this.form est le DomElement du formulaire attaché, alors qu'il est nul autrement. // edit : jQuery, mais possible avec vanilla, aussi ofc

366voto

Offereins Points 101

Une solution qui fonctionne très bien pour moi, est toujours absente ici. Elle nécessite d'avoir un élément visuellement caché <submit> ou <input type="submit"> dans le cadre de l <form> et un <label> à l'extérieur de celui-ci. Cela ressemblerait à ceci :

<form method="get" action="something.php">
     <input type="text" name="name" />
     <input type="submit" id="submit-form" class="hidden" />
</form>

<label for="submit-form" tabindex="0">Submit</label>

Ce lien vous permet maintenant de "cliquer" sur le formulaire. <submit> en cliquant sur l'élément <label> élément.

4 votes

Meilleure solution imho sans js requis et des changements majeurs :)

74 votes

Fonctionne aussi dans IE 11. Je sais, on ne voit pas souvent "fonctionne" et "IE" dans la même phrase.

1 votes

Wow, cette réponse est utile lors de la création d'une interface qui a un bouton d'envoi qui est loin et à l'extérieur de l'espace de l'interface. <form> . Il s'agit d'une solution simple. Cette réponse peut être la réponse à la question :)

97voto

Jason Gennaro Points 20848

Mise à jour : Dans les navigateurs modernes, vous pouvez utiliser l'option form pour ce faire .


Pour autant que je sache, vous ne pouvez pas faire cela sans javascript.

Voici ce que dit la spécification

Les éléments utilisés pour créer des contrôles apparaissent généralement à l'intérieur d'un élément FORM mais peuvent également apparaître en dehors d'une déclaration d'élément FORM lorsqu'ils sont utilisés pour construire des interfaces utilisateur. Ce point est abordé dans la section sur les événements intrinsèques. Notez que les contrôles en dehors d'un formulaire ne peuvent pas être des contrôles réussis.

C'est mon audace

A submit est considéré comme un contrôle.

http://www.w3.org/TR/html4/interact/forms.html#h-17.2.1

Extrait des commentaires

J'ai une zone de paramètres à onglets multiples avec un bouton pour tout mettre à jour. de la conception de cette zone, le bouton doit se trouver à l'extérieur du formulaire.

Pourquoi ne pas placer le input à l'intérieur du formulaire, mais utiliser le CSS pour le positionner ailleurs sur la page ?

22 votes

Pour info, le support HTML5 n'est pas encore parfait, mais on y arrive : impressivewebs.com/html5-form-attribute

6 votes

J'arrive un peu tard, mais comment faire pour placer l'entrée dans le formulaire, mais la positionner ailleurs ?

0 votes

Vous pouvez utiliser le tag <button>à cette fin pour html4

48voto

dav Points 1069

Si vous pouvez utiliser jQuery vous pouvez utiliser ceci

<form method="get" action="something.php" id="myForm">
    <input type="text" name="name" />

    <input type="submit" style="display:none" />
</form>

<input type="button" value="Submit" id="myButton" />

<script type="text/javascript">
    $(document).ready(function() {
       $("#myButton").click(function() {
           $("#myForm").submit();
       });
    });
</script>

La solution consiste donc à créer un bouton comme Submit, à placer le vrai bouton submit dans le formulaire (en le masquant bien sûr) et à soumettre le formulaire par jquery en cliquant sur le bouton 'Fake Submit'. J'espère que cela vous aidera.

1 votes

Pour le faire fonctionner sur les deux navigateurs HTML5 ready et IE, voici mon jQuery $('button[form]').click(function (){ var formId = $(this).attr('form'); $('#' + formId).submit(); });

19voto

Mrchief Points 25418

Essayez ça :

<input type="submit" onclick="document.forms[0].submit();" />

Bien que je suggère d'ajouter un id au formulaire et accéder par cela au lieu de document.forms[index] .

1 votes

Oui je sais comment le faire avec javascript, si vous regardez je ne l'ai pas marqué comme javascript.

0 votes

Je suis désolé, je n'ai pas bien compris que vous cherchiez un moyen non JS (je pensais que vous aviez oublié de le marquer sous JS).

1 votes

C'est la meilleure façon de procéder si vous voulez soumettre un formulaire externe à l'aide d'un bouton dans un autre formulaire.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X