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

Dis que j'ai:

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

<input type="submit" />

Comment puis-je envoyer ce formulaire avec ce bouton de soumission en dehors du formulaire, je pense qu'en HTML5, il y a un attribut d'action pour la soumission, mais je ne sais pas si c'est entièrement cross-browser et s'il ne l'est pas, est-il de toute façon faire ça?

Mise à jour: dans les navigateurs modernes, vous pouvez utiliser l' formattribut pour ce faire .

Pour autant que je sache, vous ne pouvez pas le faire 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 à l'extérieur d'une déclaration d'élément FORM lorsqu'ils sont utilisés pour créer des interfaces utilisateur. Ceci est discuté 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 audacieux

Un submitbouton est considéré comme un contrôle.

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

D'après les commentaires

J'ai une zone de paramètres à onglets multiples avec un bouton pour tout mettre à jour, en raison de sa conception, le bouton serait en dehors du formulaire.

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

En HTML5, il y a l'attribut formulaire . Fondamentalement

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

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

Une solution qui fonctionne très bien pour moi, manque toujours ici. Cela nécessite d'avoir un élément <submit>ou un <input type="submit">élément visuellement caché à l' intérieur du <form>, et un <label>élément associé à l' extérieur. 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 désormais de «cliquer» sur l' <submit>élément de formulaire en cliquant sur l' <label>élément.

si vous pouvez utiliser jQuery, vous pouvez l'utiliser

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

Donc, l'essentiel est de créer un bouton comme Soumettre, et de mettre le vrai bouton de soumission dans le formulaire (bien sûr, le cacher), et de soumettre le formulaire par jquery en cliquant sur le bouton 'Fake Submit'. J'espère que ça aide.

<form method="get" id="form1" action="something.php">

</form>

<!-- External button-->
<button type="submit" form="form1">Click me!</button>

Cela a fonctionné pour moi, d'avoir un bouton d'envoi à distance pour un formulaire.

Similaire à une autre solution ici, avec des modifications mineures:

<form method="METHOD" id="FORMID">
   <!-- ...your inputs -->
</form>
<button type="submit" form="FORMID" value="Submit">Submit</button>

https://www.w3schools.com/tags/att_form.asp

Essaye ça:

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

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

Vous pouvez toujours utiliser jQuery:

<form id="myForm">
  <!-- form controls -->
</form>
<input type="submit" id="myButton">

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

Voici une solution assez solide qui incorpore les meilleures idées jusqu'à présent ainsi que ma solution à un problème mis en évidence avec Offerein. Aucun javascript n'est utilisé.

Si vous vous souciez de la compatibilité descendante avec IE (et même Edge 13), vous ne pouvez pas utiliser l' form="your-form" attribut .

Utilisez une entrée de soumission standard sans affichage et ajoutez une étiquette pour celle-ci en dehors du formulaire:

<form id="your-form">
  <input type="submit" id="your-form-submit" style="display: none;">
</form>

Notez l'utilisation de display: none;. C'est intentionnel. L'utilisation de la .hiddenclasse de bootstrap est en conflit avec jQuery .show()et .hide(), et est depuis déconseillée dans Bootstrap 4.

Maintenant, ajoutez simplement une étiquette pour votre soumission, (conçue pour bootstrap):

<label for="your-form-submit" role="button" class="btn btn-primary" tabindex="0">
  Submit
</label>

Contrairement à d'autres solutions, j'utilise également tabindex - défini sur 0 - ce qui signifie que nous sommes désormais compatibles avec la tabulation du clavier. L'ajout de l' role="button"attribut lui donne le style CSS cursor: pointer. Et voilà. ( Voir ce violon ).

Cela fonctionne parfaitement! ;)

Cela peut être fait en utilisant Ajax et avec ce que j'appelle: "un élément de miroir de formulaire". Au lieu d'envoyer un formulaire avec un élément à l'extérieur, vous pouvez créer un faux formulaire. Le formulaire précédent n'est pas nécessaire.

<!-- This will do the trick -->
<div >
    <input id="mirror_element" type="text" name="your_input_name">
    <input type="button" value="Send Form">
</div>

Le code ajax serait comme:

    <script>
        ajax_form_mirror("#mirror_element", "your_file.php", "#your_element_response", "POST");

        function ajax_form_mirror(form, file, element, method) {
            $(document).ready(function() {
                // Ajax
                $(form).change(function() { // catch the forms submit event
                    $.ajax({                // create an AJAX call...
                        data: $(this).serialize(),      // get the form data
                        type: method,                   // GET or POST
                        url: file,                      // the file to call
                        success: function (response) {   // on success..
                        $(element).html(response);  // update the DIV
                        }
                    });

                    return false; // cancel original event to prevent form submitting
                });
            });
        }
   </script>

Ceci est très utile si vous souhaitez envoyer des données dans un autre formulaire sans soumettre le formulaire parent.

Ce code peut probablement être adapté / optimisé en fonction des besoins. Cela fonctionne parfaitement !! ;) Fonctionne également si vous voulez une boîte d'option de sélection comme celle-ci:

<div>
    <select id="mirror_element" name="your_input_name">
        <option id="1" value="1">A</option>
        <option id="2" value="2">B</option>
        <option id="3" value="3">C</option>
        <option id="4" value="4">D</option>
    </select>
</div>

J'espère que cela a aidé quelqu'un comme ça m'a aidé. ;)

Peut-être que cela pourrait fonctionner, mais je ne sais pas si c'est du HTML valide.

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

<label for="submitButton">Submit</label>

J'ai eu un problème où j'essayais de masquer le formulaire à partir d'un élément de cellule de tableau, mais toujours d'afficher le bouton d'envoi des formulaires. Le problème était que l'élément de formulaire occupait toujours un espace vierge supplémentaire, ce qui rend le format de ma cellule de tableau bizarre. L'affichage: aucun et la visibilité: les attributs cachés ne fonctionnaient pas car cela masquerait également le bouton d'envoi, car il était contenu dans le formulaire que j'essayais de cacher. La réponse simple était de définir la hauteur des formulaires à presque rien en utilisant CSS

Alors,

CSS -

    #formID {height:4px;}

travaillé pour moi.

J'ai utilisé de cette façon, et j'ai bien aimé, cela valide le formulaire avant de le soumettre est également compatible avec safari / google. pas de jquery nn

        <module-body>
            <form id="testform" method="post">
                <label>Input Title</label>
                <input name="named1" placeholder="Placeholder"  title="Please enter only alphanumeric characters." required="required" pattern="[A-Za-z0-9]{1,20}" />
                <alert>No Alerts!</alert>

                <label>Input Title</label>
                <input placeholder="Placeholder" title="Please enter only alphanumeric characters." required="required" pattern="[A-Za-z0-9]{1,20}" />
                <alert>No Alerts!</alert>

                <label>Input Title</label>
                <input placeholder="Placeholder" title="Please enter only alphanumeric characters." required="required" pattern="[A-Za-z0-9]{1,20}" />
                <alert>No Alerts!</alert>
            </form>
        </module-body>
        <module-footer>
            <input type="button" onclick='if (document.querySelector("#testform").reportValidity()) { document.querySelector("#testform").submit(); }' value="Submit">
            <input type="button" value="Reset">
        </module-footer>