Prześlij formularz za pomocą przycisku poza znacznikiem <form>

Powiedz, że mam:

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

<input type="submit" />

Jak przejść do przesłania tego formularza za pomocą tego przycisku przesyłania poza formularzem, myślę, że w HTML5 jest atrybut akcji dla przesyłania, ale nie jestem pewien, czy jest to w pełni przeglądarka i czy tak nie jest Zrób to?

Aktualizacja: w nowoczesnych przeglądarkach możesz to zrobić za pomocą formatrybutu .

O ile mi wiadomo, nie można tego zrobić bez javascript.

Oto, co mówi specyfikacja

Elementy używane do tworzenia formantów zwykle pojawiają się w elemencie FORM, ale mogą także pojawiać się poza deklaracją elementu FORM, gdy są używane do budowania interfejsów użytkownika. Jest to omówione w części dotyczącej zdarzeń wewnętrznych. Pamiętaj, że formanty poza formularzem nie mogą być formantami pomyślnymi.

To moja śmiała

submitPrzycisk uważany jest kontrola.

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

Z komentarzy

Mam obszar ustawień z wieloma zakładkami z przyciskiem do aktualizacji wszystkich, ze względu na jego konstrukcję przycisk byłby poza formą.

Dlaczego nie umieścić inputformularza w środku, ale użyć CSS, aby umieścić go w innym miejscu na stronie?

W HTML5 istnieje atrybut formularza . Gruntownie

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

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

Wciąż tu brakuje rozwiązania, które działa dla mnie świetnie. Wymaga posiadania wizualnie ukrytego elementu <submit>lub <input type="submit">elementu <form>powiązanego <label>poza nim. Wyglądałoby to tak:

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

Teraz ten link umożliwia „kliknięcie” <submit>elementu formularza przez kliknięcie <label>elementu.

jeśli możesz użyć jQuery, możesz użyć tego

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

Najważniejsze jest więc utworzenie przycisku takiego jak Prześlij i umieszczenie prawdziwego przycisku Prześlij w formularzu (oczywiście ukrywanie go) i przesłanie formularza za pomocą jquery poprzez kliknięcie przycisku „Fake Prześlij”. Mam nadzieję, że to pomoże.

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

</form>

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

To działało dla mnie, aby mieć zdalny przycisk przesyłania formularza.

Podobne do innego rozwiązania tutaj, z niewielkimi modyfikacjami:

<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

Spróbuj tego:

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

Chociaż sugerowałbym dodanie iddo formularza i uzyskanie dostępu przez to zamiast document.forms[index].

Zawsze możesz użyć jQuery:

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

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

Oto całkiem solidne rozwiązanie, które zawiera najlepsze dotychczasowe pomysły, a także zawiera moje rozwiązanie problemu wyróżnionego w Offerein. Nie używa się javascript.

Jeśli zależy ci na kompatybilności wstecznej z IE (a nawet Edge 13), nie możesz użyć tego form="your-form" atrybutu .

Użyj standardowego wejścia przesłanego bez wyświetlania i dodaj etykietę poza formularzem:

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

Zwróć uwagę na użycie display: none;. To jest celowe. Używanie .hiddenklas bootstrap powoduje konflikty z jQuery's .show()i .hide()od tego czasu jest przestarzałe w Bootstrap 4.

Teraz wystarczy dodać etykietę do przesłania (w stylu bootstrap):

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

W przeciwieństwie do innych rozwiązań używam również tabindex - ustawionego na 0 - co oznacza, że ​​jesteśmy teraz kompatybilni z klawiszami tabulacji. Dodanie role="button"atrybutu nadaje mu styl CSS cursor: pointer. Zrobione. ( Zobacz to skrzypce ).

To działa idealnie! ;)

Można to zrobić za pomocą Ajaxa i za pomocą tego, co nazywam: „elementem lustrzanego formularza”. Zamiast wysłać formularz z elementem zewnętrznym, możesz utworzyć fałszywy formularz. Poprzedni formularz nie jest potrzebny.

<!-- 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 będzie wyglądał następująco:

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

Jest to bardzo przydatne, jeśli chcesz wysłać dane w innym formularzu bez przesyłania formularza nadrzędnego.

Ten kod prawdopodobnie można dostosować / zoptymalizować w zależności od potrzeb. Działa idealnie !! ;) Działa również, jeśli chcesz wybrać pole opcji takie jak to:

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

Mam nadzieję, że pomogło to komuś takiemu, pomogło mi. ;)

Może to może działać, ale nie wiem, czy to jest poprawny 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>

Wystąpił problem polegający na tym, że próbowałem ukryć formularz przed elementem komórki tabeli, ale nadal wyświetlałem przycisk przesyłania formularzy. Problem polegał na tym, że element formularza wciąż zajmował dodatkowe puste miejsce, przez co format mojej komórki tabeli wyglądał dziwnie. Wyświetlanie: brak i widoczność: ukryte atrybuty nie działały, ponieważ również ukrywałby przycisk wysyłania, ponieważ był zawarty w formularzu, który próbowałem ukryć. Prostą odpowiedzią było ustawienie wysokości formularzy na prawie nic za pomocą CSS

Więc,

CSS -

    #formID {height:4px;}

pracował dla mnie.

Użyłem w ten sposób i podobało mi się, to sprawdza poprawność formularza przed przesłaniem również jest kompatybilny z safari / google. bez 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>