Senden Sie das Formular über eine Schaltfläche außerhalb des <form> -Tags

Sagen wir, ich habe:

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

<input type="submit" />

Wie gehe ich vor, um dieses Formular mit dieser Schaltfläche zum Senden außerhalb des Formulars zu senden? Ich denke, in HTML5 gibt es ein Aktionsattribut für das Senden, aber ich bin mir nicht sicher, ob dies vollständig browserübergreifend ist und ob es sowieso nicht vorhanden ist mach das?

Update: In modernen Browsern können Sie dazu das formAttribut verwenden .

Soweit ich weiß, können Sie dies nicht ohne Javascript tun.

Hier ist, was die Spezifikation sagt

Die zum Erstellen von Steuerelementen verwendeten Elemente werden im Allgemeinen innerhalb eines FORM-Elements angezeigt, können jedoch auch außerhalb einer FORM-Elementdeklaration angezeigt werden, wenn sie zum Erstellen von Benutzeroberflächen verwendet werden. Dies wird im Abschnitt über intrinsische Ereignisse erläutert. Beachten Sie, dass Steuerelemente außerhalb eines Formulars keine erfolgreichen Steuerelemente sein können.

Das ist meine Kühnheit

Eine submitSchaltfläche wird als Steuerelement betrachtet.

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

Aus den Kommentaren

Ich habe einen Einstellungsbereich mit mehreren Registerkarten und einer Schaltfläche, mit der alle aktualisiert werden können. Aufgrund des Designs befindet sich die Schaltfläche außerhalb des Formulars.

Warum platzieren Sie das inputFormular nicht innerhalb des Formulars, sondern verwenden CSS, um es an einer anderen Stelle auf der Seite zu positionieren?

In HTML5 gibt es das Formularattribut . Grundsätzlich

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

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

Eine Lösung, die für mich gut funktioniert, fehlt hier noch. Es erfordert ein visuell verborgenes <submit>oder <input type="submit">Element innerhalb des <form>und ein zugehöriges <label>Element außerhalb davon. Es würde so aussehen:

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

Über diesen Link können Sie nun auf das Formularelement klicken, <submit>indem Sie auf das <label>Element klicken .

Wenn Sie jQuery verwenden können, können Sie dies verwenden

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

Die Quintessenz besteht also darin, eine Schaltfläche wie "Senden" zu erstellen, die eigentliche Schaltfläche "Senden" in das Formular einzufügen (natürlich auszublenden) und das Formular per Abfrage zu senden, indem Sie auf die Schaltfläche "Gefälschtes Senden" klicken. Ich hoffe es hilft.

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

</form>

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

Dies funktionierte für mich, um eine Remote-Senden-Schaltfläche für ein Formular zu haben.

Ähnlich wie bei einer anderen Lösung hier, mit geringfügigen Änderungen:

<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

Versuche dies:

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

Obwohl ich vorschlagen würde id, dem Formular ein hinzuzufügen und stattdessen darauf zuzugreifen document.forms[index].

Sie können jQuery jederzeit verwenden:

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

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

Hier ist eine ziemlich solide Lösung, die die bisher besten Ideen enthält und meine Lösung für ein mit Offereins hervorgehobenes Problem enthält. Es wird kein Javascript verwendet.

Wenn Sie sich für die Abwärtskompatibilität mit IE (und sogar Edge 13) interessieren, können Sie das form="your-form" Attribut nicht verwenden .

Verwenden Sie eine Standard-Übermittlungseingabe mit Anzeige keine und fügen Sie eine Beschriftung außerhalb des Formulars hinzu:

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

Beachten Sie die Verwendung von display: none;. Dies ist beabsichtigt. Die Verwendung der Bootstrap- .hiddenKlasse steht in Konflikt mit jQuery's .show()und .hide()und ist seitdem in Bootstrap 4 veraltet.

Fügen Sie nun einfach eine Bezeichnung für Ihre Übermittlung hinzu (gestylt für Bootstrap):

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

Im Gegensatz zu anderen Lösungen verwende ich auch tabindex - auf 0 gesetzt - was bedeutet, dass wir jetzt mit Tastatur-Tabs kompatibel sind. Durch Hinzufügen des role="button"Attributs erhält es den CSS-Stil cursor: pointer. Et voila. ( Siehe diese Geige ).

Das funktioniert perfekt! ;)

Dies kann mit Ajax und mit dem, was ich nenne: "einem Formspiegelelement" erfolgen. Um ein Formular mit einem Element außerhalb zu senden, können Sie ein gefälschtes Formular erstellen. Das vorherige Formular wird nicht benötigt.

<!-- 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 wäre wie folgt:

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

Dies ist sehr nützlich, wenn Sie einige Daten in einem anderen Formular senden möchten, ohne das übergeordnete Formular zu senden.

Dieser Code kann wahrscheinlich je nach Bedarf angepasst / optimiert werden. Es funktioniert perfekt !! ;) Funktioniert auch, wenn Sie ein Auswahlfeld wie das folgende wünschen:

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

Ich hoffe es hat jemandem geholfen wie es mir geholfen hat. ;)

Vielleicht könnte das funktionieren, aber ich weiß nicht, ob dies gültiges HTML ist.

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

Ich hatte ein Problem, bei dem ich versuchte, das Formular vor einem Tabellenzellenelement auszublenden, aber dennoch die Schaltfläche zum Senden von Formularen anzuzeigen. Das Problem war, dass das Formularelement immer noch einen zusätzlichen Leerraum einnahm, wodurch das Format meiner Tabellenzelle seltsam aussah. Die Anzeige: keine und Sichtbarkeit: versteckte Attribute funktionierten nicht, da dadurch auch die Schaltfläche zum Senden ausgeblendet wurde, da sie in dem Formular enthalten war, das ich ausblenden wollte. Die einfache Antwort bestand darin, die Formularhöhe mithilfe von CSS auf kaum etwas festzulegen

So,

CSS -

    #formID {height:4px;}

arbeitete für mich.

Ich habe diese Methode verwendet und es hat mir gut gefallen. Sie überprüft das Formular vor dem Senden und ist auch mit Safari / Google kompatibel. keine 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>