Tự động tạo và gửi biểu mẫu

80

Có cách nào trong jQuery để tạo và gửi biểu mẫu một cách nhanh chóng.

Một cái gì đó như dưới đây.

<html>
    <head>
    <title> Title Text Goes Here </title>
    <script src="http://code.jquery.com/jquery-1.7.js"></script>
    <script>
        $(document).ready(function(){alert('hi')});
        $('<form/>').attr('action','form2.html').submit();
    </script>
    </head>
    <body>

        Content Area

    </body>
    </html>

Điều này được cho là có hiệu quả hay có một cách khác để làm điều này?

— Santosh Gokak
nguồn

Bạn đã đọc API chưa?

— geoffreak

Ngoài ra hãy xem tại câu trả lời được chấp nhận ở đây: stackoverflow.com/questions/14836557/...

— thdoan

108

Có hai điều sai với mã của bạn. Đầu tiên là bạn đã bao gồm $(document).ready();nhưng không bao bọc đối tượng jQuery đang tạo phần tử với nó.

Thứ hai là phương pháp bạn đang sử dụng. jQuery sẽ tạo bất kỳ phần tử nào khi bộ chọn (hoặc nơi bạn thường đặt bộ chọn) được thay thế bằng phần tử bạn muốn tạo. Sau đó, bạn chỉ cần nối nó vào cơ thể và gửi nó.

$(document).ready(function(){
    $('<form action="form2.html"></form>').appendTo('body').submit();
});

Đây là mã đang hoạt động. Trong ví dụ này, nó không tự động gửi, chỉ để chứng minh rằng nó sẽ thêm phần tử biểu mẫu.

Đây là mã với tự động gửi. Nó hoạt động tốt. Jsfiddle đưa bạn đến trang 404 vì rõ ràng là "form2.html" không tồn tại trên máy chủ của nó.

— Purag
nguồn

vấn đề đầu tiên mà bạn đề cập mặc dù không phải là một vấn đề :)

— Santosh Gokak

2

@ user42540: Không nhất thiết, nhưng tốt hơn nên kích hoạt mã JS của bạn khi trang đã tải xong. Điều này sẽ ngăn ngừa các lỗi không mong muốn.

— Purag

3

Nó có thể hoạt động trên một số trình duyệt, nhưng có lý do chính đáng để bao gồm hầu hết mã thao tác DOM bên trong một $(document).ready()khối - nó đảm bảo rằng trình duyệt có thể thực hiện bất kỳ thay đổi nào đối với DOM một cách an toàn. Mặt khác, các trình duyệt kén chọn như IE6 / 7 sẽ tạo ra sự giả mạo nếu bạn cố gắng thay đổi bất kỳ thứ gì trước khi toàn bộ trang được tải.

— GregL

99

Có, nó là có thể. Dưới đây là một trong những giải pháp ( jsfiddle làm bằng chứng ).

HTML:

<a id="fire" href="#" title="submit form">Submit form</a>

(xem, ở trên không có biểu mẫu)

JavaScript:

jQuery('#fire').click(function(event){
    event.preventDefault();
    var newForm = jQuery('<form>', {
        'action': 'http://www.google.com/search',
        'target': '_top'
    }).append(jQuery('<input>', {
        'name': 'q',
        'value': 'stack overflow',
        'type': 'hidden'
    }));
    newForm.submit();
});

Ví dụ trên cho bạn thấy cách tạo biểu mẫu, cách thêm đầu vào và cách gửi. Đôi khi việc hiển thị kết quả bị cấm X-Frame-Options, vì vậy tôi đã đặt targetthành _top, thay thế nội dung của cửa sổ chính. Ngoài ra, nếu bạn đặt _blank, nó có thể hiển thị trong cửa sổ / tab mới.

— Tadeck
nguồn

Giải pháp tốt (mặc dù hơi dài), nhưng đầu vào không hiển thị.

— Purag

@Purmou: Giải pháp thực tế là tạo biểu mẫu và sau đó submit()gọi. Tôi đã cố ý cung cấp mã tạo biểu mẫu dài để chỉ ra cách tạo biểu mẫu và các phần tử của nó. Tôi tin rằng điều này là khá ổn.

— Tadeck

22

.appendTo ('body') là cần thiết để nó hoạt động trong Firefox của tôi (23.0.1). Nếu không, nó chỉ trả về một đối tượng biểu mẫu nhưng không gửi.

— Curtis Yallop

5

newForm.hide (). appendTo ("body"). submit (); // hiển thị doesnt các lĩnh vực và các công trình trong FF

— laffuste

4

Giống như điều này xảy ra với GET và tương tự như việc đưa một chuỗi truy vấn vào URI mục tiêu. Giả sử nhiều người đang muốn sử dụng một biểu mẫu để ĐĂNG. Trong trường hợp nó không rõ ràng, hãy sử dụng 'method': postđể thực hiện điều đó.

— ficuscr

35

Phiên bản của tôi không có jQuery, chức năng đơn giản có thể được sử dụng nhanh chóng

Chức năng:

function post_to_url(path, params, method) {
    method = method || "post";

    var form = document.createElement("form");
    form.setAttribute("method", method);
    form.setAttribute("action", path);

    for(var key in params) {
        if(params.hasOwnProperty(key)) {
            var hiddenField = document.createElement("input");
            hiddenField.setAttribute("type", "hidden");
            hiddenField.setAttribute("name", key);
            hiddenField.setAttribute("value", params[key]);

            form.appendChild(hiddenField);
         }
    }

    document.body.appendChild(form);
    form.submit();
}

Sử dụng:

post_to_url('fullurlpath', {
    field1:'value1',
    field2:'value2'
}, 'post');

— Muthukumar Anbalagan
nguồn

13

Giống như Purmou, nhưng xóa biểu mẫu khi gửi sẽ được thực hiện.

$(function() {
   $('<form action="form2.html"></form>').appendTo('body').submit().remove();
});

— javray
nguồn

9

Ví dụ Josepmra hoạt động tốt cho những gì tôi cần. Nhưng tôi phải thêm dòng

 form.appendTo( document.body )

để nó hoạt động.

var form = $(document.createElement('form'));
$(form).attr("action", "reserves.php");
$(form).attr("method", "POST");

var input = $("<input>")
    .attr("type", "hidden")
    .attr("name", "mydata")
    .val("bla" );


$(form).append($(input));

form.appendTo( document.body )

$(form).submit();

— web
nguồn

8

Có, bạn vừa quên dấu ngoặc kép ...

$('<form/>').attr('action','form2.html').submit();

— Nicolas Thery
nguồn

Lỗi javascript là gì? Cố gắng đặt nó vào chức năng sẵn sàng

— Nicolas Thery

điều này sẽ không hoạt động trên IE cũ, vì nó không đính kèm trên HTML DOM. Nó cần được thêm vào <body>trước khi bắt đầu hoạt động.

— Raptor

4

Hãy thử với mã này -
Đây là một giải pháp hoàn toàn năng động:

    var form = $(document.createElement('form'));
    $(form).attr("action", "reserves.php");
    $(form).attr("method", "POST");

    var input = $("<input>").attr("type", "hidden").attr("name", "mydata").val("bla");
    $(form).append($(input));
    $(form).submit();

— josepmra
nguồn

2

Tại sao bạn không $.posthoặc $.gettrực tiếp?

GET yêu cầu:

$.get(url, data, callback);

POST yêu cầu:

$.post(url, data, callback);

Sau đó, bạn không cần biểu mẫu, chỉ cần gửi dữ liệu trong đối tượng dữ liệu của bạn.

$.post("form2.html", {myField: "some value"}, function(){
  alert("done!");
});

— SparK
nguồn

1

Bởi vì cần phải kích hoạt tải xuống từ máy chủ và với post / get, nó không hoạt động.

— a20

Cũng với điều này, bạn không rời khỏi trang.

— robsch

@ a20 Thiếu gì có tiêu đề phía máy chủ Content-Disposition: Attachment;để buộc tải xuống.

— SparK

@SparK hmmmm .. nhận xét của bạn khiến tôi tự hỏi, không có bất kỳ kiểu kịch câm nào ở phía máy chủ mà trình duyệt có thể diễn giải (hoặc không diễn giải và buộc) tải xuống. Ví dụ: một tệp zip. Không thể theo bất kỳ cách nào để chỉ định rằng nó đáp ứng yêu cầu tải xuống của người dùng, vì vậy hãy kích hoạt tải xuống ...

— a20

@ a20 Có Content-Type: application/octet-stream;,. Ngoài ra còn có các downloadthuộc tính trong neo ... client-side điều ( davidwalsh.name/download-attribute )

— Spark

0

Giả sử bạn muốn tạo một biểu mẫu với một số tham số và thực hiện cuộc gọi ĐĂNG

var param1 = 10;

$('<form action="./your_target.html" method="POST">' +
'<input type="hidden" name="param" value="' + param + '" />' +
'</form>').appendTo('body').submit();

Bạn cũng có thể làm tất cả trên một dòng nếu bạn muốn :-)

— Anthony
nguồn