Kirim formulir menggunakan tombol di luar tag <form>

Katakan saya punya:

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

<input type="submit" />

Bagaimana cara mengirim formulir itu dengan tombol kirim di luar formulir, saya pikir dalam HTML5 ada atribut tindakan untuk pengiriman, tetapi saya tidak yakin apakah itu sepenuhnya lintas-browser dan jika tidak ada juga untuk melakukan hal ini?

Pembaruan: Di browser modern, Anda dapat menggunakan formatribut untuk melakukan ini .

Sejauh yang saya tahu, Anda tidak dapat melakukan ini tanpa javascript.

Inilah yang dikatakan oleh spec

Elemen yang digunakan untuk membuat kontrol umumnya muncul di dalam elemen FORMULIR, tetapi juga bisa muncul di luar deklarasi elemen FORMULIR ketika mereka digunakan untuk membangun antarmuka pengguna. Ini dibahas pada bagian tentang peristiwa intrinsik. Perhatikan bahwa kontrol di luar formulir tidak dapat menjadi kontrol yang berhasil.

Itu berani saya

Sebuah submittombol dianggap sebagai kontrol.

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

Dari komentar

Saya memiliki area pengaturan multi-tab dengan tombol untuk memperbarui semua, karena desainnya tombolnya akan berada di luar formulir.

Mengapa tidak menempatkan bagian inputdalam formulir, tetapi gunakan CSS untuk menempatkannya di tempat lain di halaman?

Di HTML5, ada atribut form . Pada dasarnya

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

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

Solusi yang berfungsi bagus untuk saya, masih belum ada di sini. Hal ini membutuhkan memiliki visual yang tersembunyi <submit>atau <input type="submit">elemen isi setiap modul yang <form>, dan terkait <label>di luar unsur itu. Akan terlihat seperti ini:

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

Sekarang tautan ini memungkinkan Anda untuk 'mengklik' <submit>elemen formulir dengan mengklik <label>elemen tersebut.

jika Anda dapat menggunakan jQuery, Anda dapat menggunakan ini

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

Jadi, intinya adalah membuat tombol seperti Kirim, dan letakkan tombol kirim yang sebenarnya dalam bentuk (tentu saja menyembunyikannya), dan kirim formulir dengan jquery melalui mengklik tombol 'Kirim Palsu'. Semoga ini bisa membantu.

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

</form>

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

Ini berhasil bagi saya, untuk memiliki tombol kirim jauh untuk formulir.

Mirip dengan solusi lain di sini, dengan sedikit modifikasi:

<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

Coba ini:

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

Meskipun saya akan menyarankan menambahkan idke formulir dan mengakses dengan itu alih-alih document.forms[index].

Anda selalu dapat menggunakan jQuery:

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

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

Berikut ini adalah solusi yang cukup solid yang menggabungkan ide-ide terbaik sejauh ini serta memasukkan solusi saya untuk masalah yang disorot dengan Offerein's. Tidak ada javascript yang digunakan.

Jika Anda peduli tentang kompatibilitas mundur dengan IE (dan bahkan Edge 13), Anda tidak dapat menggunakan form="your-form" atribut .

Gunakan input kirim standar tanpa tampilan dan tambahkan label di luar formulir:

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

Perhatikan penggunaan display: none;. Ini disengaja. Menggunakan .hiddenkonflik kelas bootstrap dengan jQuery .show()dan .hide(), dan sejak itu telah ditinggalkan dalam Bootstrap 4.

Sekarang cukup tambahkan label untuk kiriman Anda, (gaya untuk bootstrap):

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

Tidak seperti solusi lain, saya juga menggunakan tabindex - set ke 0 - yang berarti bahwa kita sekarang kompatibel dengan tab keyboard. Menambahkan role="button"atribut memberinya gaya CSS cursor: pointer. Et voila. ( Lihat biola ini ).

Ini bekerja dengan sempurna! ;)

Ini dapat dilakukan dengan menggunakan Ajax dan dengan apa yang saya sebut: "elemen bentuk cermin". Alih-alih mengirim formulir dengan elemen di luar, Anda bisa membuat formulir palsu. Formulir sebelumnya tidak diperlukan.

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

Kode ajax akan seperti:

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

Ini sangat berguna jika Anda ingin mengirim beberapa data di dalam formulir lain tanpa mengirimkan formulir induk.

Kode ini mungkin dapat diadaptasi / dioptimalkan sesuai dengan kebutuhan. Ini bekerja dengan sempurna !! ;) Juga berfungsi jika Anda menginginkan kotak pilihan seperti ini:

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

Saya harap ini membantu seseorang seperti itu membantu saya. ;)

Mungkin ini bisa berhasil, tapi saya tidak tahu apakah ini HTML yang valid.

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

Saya punya masalah di mana saya mencoba untuk menyembunyikan formulir dari elemen sel tabel, tetapi masih menunjukkan tombol kirim formulir. Masalahnya adalah bahwa elemen form masih mengambil ruang kosong tambahan, membuat format sel tabel saya terlihat aneh. Layar: tidak ada dan visibilitas: atribut tersembunyi tidak berfungsi karena itu akan menyembunyikan tombol kirim juga, karena itu terkandung dalam formulir yang saya coba sembunyikan. Jawaban sederhananya adalah mengatur tinggi form menjadi hampir tidak menggunakan CSS

Begitu,

CSS -

    #formID {height:4px;}

bekerja untukku.

Saya menggunakan cara ini, dan menyukainya, itu memvalidasi formulir sebelum mengirimkan juga kompatibel dengan safari / google. tidak ada 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>