<form> etiketinin dışındaki bir düğmeyi kullanarak formu gönderin

Diyelim ki:

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

<input type="submit" />

Formun dışında bu gönderme düğmesi ile bu formu gönderme hakkında nasıl, HTML5 içinde göndermek için bir eylem özniteliği düşünüyorum ama bu tamamen çapraz tarayıcı olup olmadığını ve yine de orada olup olmadığından emin değilim Bunu yap?

Güncelleme: Modern tarayıcılarda bunu formyapmak için özelliği kullanabilirsiniz .

Bildiğim kadarıyla bunu javascript olmadan yapamazsınız.

İşte spec ne diyor

Denetimleri oluşturmak için kullanılan öğeler genellikle bir FORM öğesinin içinde görünür, ancak kullanıcı arabirimleri oluşturmak için kullanıldıklarında bir FORM öğesi bildiriminin dışında da görünebilir. Bu, iç olaylarla ilgili bölümde tartışılmaktadır. Bir formun dışındaki denetimlerin başarılı denetimler olamayacağını unutmayın.

Bu benim cesurum

Bir submitdüğme kontrol olarak kabul edilir.

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

Yorumlardan

Hepsini güncellemek için bir düğme ile çok sekmeli ayarlar alanı var, bunun tasarımı nedeniyle düğme formun dışında olacaktır.

Neden inputformun içine yerleştirilmiyor, ancak sayfanın başka bir yerine yerleştirmek için CSS kullanılıyor?

HTML5'te form özelliği vardır . temel olarak

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

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

Benim için harika bir çözüm hala burada eksik. İçinde görsel olarak gizli <submit>ya da bir <input type="submit">eleman <form>ve <label>onun dışında bir ilişkili eleman olması gerekir. Şöyle görünecektir:

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

Artık bu bağlantı, <submit>öğeyi tıklatarak form öğesini 'tıklatmanızı' sağlar <label>.

jQuery kullanabiliyorsanız bunu kullanabilirsiniz

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

Bu nedenle, alt satırda Gönder gibi bir düğme oluşturmak ve gerçek gönderme düğmesini forma (tabii ki gizlemek) koymak ve 'Sahte Gönder' düğmesini tıklayarak formu jquery ile göndermektir. Umarım yardımcı olur.

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

</form>

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

Bu, bir form için uzaktan gönderme düğmesine sahip olmak benim için çalıştı.

Buradaki başka bir çözüme benzer, küçük değişikliklerle:

<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

Bunu dene:

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

Her ne kadar idforma bir ekleme ve bunun yerine erişerek öneririz document.forms[index].

Her zaman jQuery kullanabilirsiniz:

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

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

İşte şimdiye kadar en iyi fikirleri içeren ve Offerein'in vurguladığı bir soruna çözümümü içeren oldukça sağlam bir çözüm. Javascript kullanılmaz.

IE (ve hatta Edge 13) ile geriye dönük uyumluluğu önemsiyorsanız, form="your-form" özelliği kullanamazsınız .

Hiçbiri görüntülenmeyen standart bir gönderme girişi kullanın ve formun dışında bir etiket ekleyin:

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

Kullanımına dikkat edin display: none;. Bu kasıtlı. Bootstrap en kullanma .hiddenjQuery en sınıf çatışmaları .show()ve .hide(), ve o zamandan beri Bootstrap 4'te kaldırılmıştır.

Şimdi gönderiniz için bir etiket ekleyin, (bootstrap için tasarlandı):

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

Diğer çözümlerden farklı olarak, 0 olarak ayarlanmış tabindex kullanıyorum - bu da artık klavye sekme ile uyumlu olduğumuz anlamına geliyor. role="button"Özniteliğin eklenmesi ona CSS stili verir cursor: pointer. Et voila. ( Bu kemanı gör ).

Bu mükemmel çalışıyor! ;)

Bu Ajax ve "form ayna elemanı" dediğim ile yapılabilir. Dışarıda bir öğe içeren bir form göndermek yerine, sahte bir form oluşturabilirsiniz. Önceki forma gerek yoktur.

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

Kod ajax şöyle olurdu:

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

Üst formu göndermeden başka bir formun içine bazı veriler göndermek istiyorsanız bu çok kullanışlıdır.

Bu kod muhtemelen ihtiyaca göre uyarlanabilir / optimize edilebilir. Mükemmel çalışıyor !! ;) Bunun gibi bir seçenek kutusu seçmek isterseniz de çalışır:

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

Umarım böyle birisine yardımcı olmuştur. ;)

Belki bu işe yarayabilir, ancak bunun geçerli HTML olup olmadığını bilmiyorum.

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

Bir tablo hücre öğesinden formu gizlemeye çalıştığım bir sorun vardı, ama yine de formları Gönder düğmesini göster. Sorun, form öğesinin hala fazladan boş bir alan kaplaması ve tablo hücresimin biçiminin garip görünmesiydi. Display: none ve visibility: hidden öznitelikleri, gizlemeye çalıştığım formun içinde bulunduğundan, gönderme düğmesini de gizleyeceği için çalışmadı. Basit cevap, form yüksekliğini CSS kullanarak zar zor hiçbir şeye ayarlamaktı

Yani,

CSS -

    #formID {height:4px;}

benim için çalıştı.

Bu şekilde kullandım ve nazik beğendim, göndermeden önce formu doğrular da safari / google ile uyumludur. jquery yok 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>