Gửi biểu mẫu bằng cách sử dụng nút bên ngoài thẻ <form>

Nói rằng tôi có:

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

<input type="submit" />

Làm cách nào để gửi biểu mẫu đó bằng nút gửi bên ngoài biểu mẫu, tôi nghĩ trong HTML5 có một thuộc tính hành động cho việc gửi nhưng tôi không chắc liệu đó có phải là trình duyệt chéo hoàn toàn không và dù sao nó cũng không có làm cái này?

Cập nhật: Trong các trình duyệt hiện đại, bạn có thể sử dụng formthuộc tính để làm điều này .

Theo tôi biết, bạn không thể làm điều này mà không có javascript.

Đây là những gì thông số kỹ thuật nói

Các phần tử được sử dụng để tạo các điều khiển thường xuất hiện bên trong phần tử FORM, nhưng cũng có thể xuất hiện bên ngoài khai báo phần tử FORM khi chúng được sử dụng để xây dựng giao diện người dùng. Điều này được thảo luận trong phần về các sự kiện nội tại. Lưu ý rằng các điều khiển bên ngoài một biểu mẫu không thể là các điều khiển thành công.

Đó là sự táo bạo của tôi

Một submitnút được coi là một điều khiển.

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

Từ các ý kiến

Tôi có một khu vực cài đặt nhiều tab với một nút để cập nhật tất cả, do thiết kế của nó, nút sẽ nằm ngoài biểu mẫu.

Tại sao không đặt inputbên trong biểu mẫu, nhưng sử dụng CSS để đặt nó ở vị trí khác trên trang?

Trong HTML5, có thuộc tính biểu mẫu . Về cơ bản

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

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

Một giải pháp hiệu quả với tôi, vẫn còn thiếu ở đây. Nó đòi hỏi phải có một phần tử ẩn <submit>hoặc <input type="submit">phần tử trực quan và phần tử được <form>liên kết <label>bên ngoài nó. Nó sẽ trông như thế này:

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

Bây giờ liên kết này cho phép bạn 'nhấp vào' <submit>phần tử biểu mẫu bằng cách nhấp vào <label>phần tử.

nếu bạn có thể sử dụng jQuery, bạn có thể sử dụng

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

Vì vậy, điểm mấu chốt là tạo một nút như Gửi và đặt nút gửi thực sự trong biểu mẫu (tất nhiên là ẩn nó) và gửi biểu mẫu bằng cách sử dụng jquery thông qua nhấp vào nút 'Gửi giả'. Hy vọng nó giúp.

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

</form>

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

Điều này làm việc cho tôi, để có một nút gửi từ xa cho một hình thức.

Tương tự như một giải pháp khác ở đây, với sửa đổi nhỏ:

<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

Thử cái này:

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

Mặc dù tôi sẽ đề nghị thêm một idbiểu mẫu và truy cập bằng cách đó thay vì document.forms[index].

Bạn luôn có thể sử dụng jQuery:

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

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

Đây là một giải pháp khá vững chắc kết hợp những ý tưởng tốt nhất cho đến nay cũng như bao gồm giải pháp của tôi cho một vấn đề nổi bật với Offerein. Không có javascript được sử dụng.

Nếu bạn quan tâm đến khả năng tương thích ngược với IE (và thậm chí cả Edge 13), bạn không thể sử dụng form="your-form" thuộc tính .

Sử dụng đầu vào gửi tiêu chuẩn không hiển thị và thêm nhãn cho nó bên ngoài biểu mẫu:

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

Lưu ý việc sử dụng display: none;. Đây là cố ý. Sử dụng .hiddenlớp của bootstrap xung đột với jQuery .show()và.hide() , và từ đó bị phản đối trong Bootstrap 4.

Bây giờ chỉ cần thêm nhãn cho trình của bạn, (theo kiểu cho bootstrap):

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

Không giống như các giải pháp khác, tôi cũng đang sử dụng tabindex - được đặt thành 0 - có nghĩa là chúng tôi hiện tương thích với việc gõ bàn phím. Thêm role="button"thuộc tính cho nó kiểu CSS cursor: pointer. Et voila. ( Xem câu đố này ).

Công việc này hoàn hảo! ;)

Điều này có thể được thực hiện bằng cách sử dụng Ajax và với cái mà tôi gọi là: "một phần tử nhân bản mẫu". Thay vào đó để gửi một biểu mẫu với một yếu tố bên ngoài, bạn có thể tạo một biểu mẫu giả mạo. Các hình thức trước đó là không cần thiết.

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

Mã ajax sẽ như thế nào:

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

Điều này rất hữu ích nếu bạn muốn gửi một số dữ liệu trong một biểu mẫu khác mà không cần gửi biểu mẫu mẹ.

Mã này có thể có thể được điều chỉnh / tối ưu hóa theo nhu cầu. Nó hoạt động hoàn hảo !! ;) Cũng hoạt động nếu bạn muốn một hộp tùy chọn chọn như thế này:

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

Tôi hy vọng nó đã giúp một người như nó đã giúp tôi. ;)

Có lẽ điều này có thể hoạt động, nhưng tôi không biết đây có phải là HTML hợp lệ không.

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

Tôi đã gặp sự cố khi cố gắng ẩn biểu mẫu khỏi thành phần ô của bảng, nhưng vẫn hiển thị nút gửi biểu mẫu. Vấn đề là phần tử biểu mẫu vẫn chiếm một khoảng trống thừa, làm cho định dạng của ô bảng của tôi trông lạ. Hiển thị: không có và khả năng hiển thị: các thuộc tính ẩn không hoạt động vì nó cũng sẽ ẩn nút gửi, vì nó được chứa trong biểu mẫu mà tôi đang cố gắng ẩn. Câu trả lời đơn giản là đặt chiều cao của biểu mẫu thành hầu như không có gì bằng CSS

Vì thế,

CSS -

    #formID {height:4px;}

đã làm cho tôi.

Tôi đã sử dụng cách này và loại thích nó, nó xác nhận mẫu trước khi gửi cũng tương thích với safari / google. không 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>