<form>タグの外側のボタンを使用してフォームを送信する

私が持っていると言います：

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

<input type="submit" />

フォームの外側にある送信ボタンを使用してフォームを送信する方法を教えてください。HTML5には送信用のaction属性があると思いますが、それが完全にクロスブラウザであるかどうか、そしてそれがとにかくないかどうかはわかりませんこれを行う？

更新：最近のブラウザでは、form属性を使用してこれを行うことができます。

私の知る限り、JavaScriptなしではこれを行うことはできません。

これが仕様書に書かれていることです

コントロールの作成に使用される要素は、通常、FORM要素内に表示されますが、ユーザーインターフェイスの構築に使用される場合、FORM要素宣言の外部に表示される場合もあります。これについては、組み込みイベントのセクションで説明します。フォーム外のコントロールは成功したコントロールにはならないことに注意してください。

それは私の大胆です

submitボタンはコントロールと考えられています。

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

コメントから

すべてを更新するためのボタンが付いたマルチタブ設定領域があります。ボタンのデザインがフォームの外側にあるためです。

なぜinputフォームの内部に配置せずに、CSSを使用してページの別の場所に配置するのでしょうか。

HTML5にはform属性があります。基本的に

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

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

私にとってはうまくいく解決策がまだここにありません。には、視覚的に隠された要素<submit>または内の<input type="submit">要素<form>、およびその<label>外側に関連付けられた要素が必要です。次のようになります。

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

このリンクを使用すると、<submit>要素をクリックしてフォーム要素を「クリック」できます<label>。

jQueryを使用できる場合、これを使用できます

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

つまり、一番下の行は、Submitのようなボタンを作成し、実際の送信ボタンをフォームに配置し（もちろん非表示にする）、jQueryで[Fake Submit]ボタンをクリックしてフォームを送信することです。それが役に立てば幸い。

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

</form>

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

これは、フォームのリモート送信ボタンを持つために機能しました。

ここで別のソリューションに似ていますが、少し変更されています。

<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

これを試して：

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

idフォームにを追加して、ではなくでアクセスすることをお勧めしdocument.forms[index]ます。

いつでもjQueryを使用できます。

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

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

これは、これまでの最高のアイデアを組み込んだかなり確かなソリューションであり、Offerineで強調された問題に対する私のソリューションも含まれています。JavaScriptは使用されません。

IE（およびEdge 13）との下位互換性を重視する場合は、属性を使用できませんform="your-form" 。

display noneを指定して標準の送信入力を使用し、フォームの外側にラベルを追加します。

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

の使用に注意してくださいdisplay: none;。これは意図的なものです。ブートストラップの.hiddenクラスを使用する.show()と.hide()、jQueryのandと競合し、それ以降、Bootstrap 4で非推奨になりました。

次に、送信用のラベルを追加します（ブートストラップ用にスタイル設定）：

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

他のソリューションとは異なり、私はtabindex（ 0に設定）も使用しています。これは、キーボードのタブ移動と互換性があることを意味します。role="button"属性を追加すると、CSSスタイルになりcursor: pointerます。Et voila。（このフィドルを参照してください）。

これは完璧に動作します！;）

これは、Ajaxを使用して、私が "フォームミラーエレメント"と呼ぶ方法で実行できます。代わりに、要素のあるフォームを外部に送信する代わりに、偽のフォームを作成できます。以前のフォームは必要ありません。

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

コードajaxは次のようになります：

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

これは、親フォームを送信せずに別のフォーム内にデータを送信する場合に非常に役立ちます。

このコードはおそらく必要に応じて適応/最適化できます。それは完全に動作します!! ;）次のような選択オプションボックスが必要な場合にも機能します。

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

それが私のような誰かを助けてくれたことを願っています。;）

多分これはうまくいくかもしれませんが、これが有効なHTMLであるかどうかはわかりません。

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

表のセル要素からフォームを非表示にしようとしても、フォームの送信ボタンが表示されるという問題がありました。問題は、フォーム要素がまだ余分な空白スペースを占めているため、テーブルセルのフォーマットが奇妙に見えることでした。display：noneおよびvisibility：hidden属性は、送信ボタンも非表示にするため、機能しませんでした。これは、非表示にしようとしたフォーム内に含まれていたためです。簡単な答えは、CSSを使用してフォームの高さをかろうじて何も設定しないことでした。

そう、

CSS-

    #formID {height:4px;}

私のために働いた。

私はこの方法を使用し、親切に気に入っています。送信前にフォームを検証し、safari / googleにも対応しています。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>