web-dev-qa-db-ja.com

フォームを動的に作成して送信する

JQueryにフォームをその場で作成して送信する方法はありますか。

以下のようなもの。

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

これは機能するはずですか、これを行う別の方法がありますか？

javascriptjqueryformssubmit
74
Santosh Gokak

コードに2つの問題がありました。 1つ目は、$(document).ready();を含めましたが、それを使用して要素を作成しているjQueryオブジェクトをラップしなかったことです。

2つ目は、使用している方法です。 jQueryは、セレクター（または通常はセレクターを配置する場所）を作成する要素で置き換えたときに、任意の要素を作成します。次に、それを本文に追加して送信します。

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

こちら 実行中のコード。この例では、フォーム要素が追加されることを証明するためだけに、自動送信しません。

こちら 自動送信のコード。それはうまくいきます。 Jsfiddleを使用すると、「form2.html」がサーバー上に存在しないため、404ページが表示されます。

96
Purag

はい、可能です。解決策の1つを以下に示します（ 証明としてのjsfiddle ）。

HTML：

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

（参照、上記のフォームはありません）

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();
});

上記の例は、フォームの作成方法、入力の追加方法、および送信方法を示しています。結果の表示がX-Frame-Optionsで禁止されている場合があるため、メインウィンドウのコンテンツを置き換えるtargetを_topに設定しました。または、_blankを設定すると、新しいウィンドウ/タブ内に表示できます。

92
Tadeck

JQueryのないMyバージョンで、シンプルな機能をオンザフライで使用できます

関数：

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();
}

使用法：

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

Purmouに似ていますが、送信時にフォームを削除します。

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

はい、引用符を忘れてしまいました...

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

Josepmraの例は、必要なものに適しています。しかし、私は行を追加する必要がありました

 form.appendTo( document.body )

それが機能するために。

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();
6
webs

このコードで試してみてくださいそれは完全に動的なソリューションです

    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();
2
josepmra

なぜ $.post または $.get を直接しないのですか？

GETリクエスト：

$.get(url, data, callback);

POSTリクエスト：

$.post(url, data, callback);

その後、フォームは必要なく、データオブジェクトのデータを送信するだけです。

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