Soumettre le formulaire en utilisant un bouton en dehors de la balise

En HTML5, il y a l'attribut de 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 <input type="submit"> visuellement caché dans le <form>, et un élément <label> associé en dehors 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>

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

Si vous pouvez utiliser jQuery vous pouvez utiliser ce

<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 Submit, et de mettre le vrai bouton submit dans le formulaire (bien sûr en le cachant), et de soumettre le formulaire par jquery en cliquant sur le bouton 'faux Submit'. Espérons que cela 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 de soumission à distance pour un formulaire.

, Essayez ceci:

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

Bien que je suggère d'ajouter un id au 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 intègre 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 rétrocompatibilité avec IE (et même Edge 13), Vous ne pouvez pas utiliser le form="your-form" attribut .

Utilisez une entrée de soumission standard avec display none et ajoutez une étiquette 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;. Cela est intentionnel. Utilisation de la classe .hidden de bootstrap est en conflit avec .show() et .hide() de jQuery, et a depuis été obsolète dans Bootstrap 4.

Maintenant, ajoutez simplement une étiquette pour votre soumission, (stylée 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 - mis à 0 - ce qui signifie que nous sommes maintenant compatibles avec la tabulation du clavier. L'ajout de l'attribut role="button" lui donne le style CSS cursor: pointer. Et le tour est joué. (Voir ce violon).

Similaire à une autre solution ici, avec une modification mineure:

<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

Ce travail parfaitement! ;)

Cela peut être fait en utilisant Ajax et avec j'appelle: "un élément miroir de forme". Au lieu d'envoyer un formulaire avec un élément 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>

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>

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

Peut-être que ce code peut optimiser et corriger plus en fonction du but. Fonctionne parfaitement!! ;) Fonctionne aussi si vous voulez une boîte d'option de sélection comme ceci:

<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 aider quelqu'un comme 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>