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>
これは機能するはずですか、それともこれを行う別の方法がありますか？
回答:
コードに2つの問題がありました。1つ目は$(document).ready();、要素を作成しているjQueryオブジェクトを含めたが、ラップしなかったことです。
2番目はあなたが使っていた方法でした。jQueryは、セレクター（または通常セレクターを配置する場所）が作成する要素に置き換えられると、任意の要素を作成します。次に、それを本文に追加して送信します。
$(document).ready(function(){
$('<form action="form2.html"></form>').appendTo('body').submit();
});
これが実際のコードです。この例では、フォーム要素を追加することを証明するためだけに、自動送信は行いません。
ここだ自動でコードを提出します。それはうまくいきます。明らかに、「form2.html」がサーバーに存在しないため、Jsfiddleは404ページに移動します。
$(document).ready()ブロック内に含めるのには十分な理由があります。これにより、ブラウザーがDOMに安全に変更を加えることができるようになります。それ以外の場合、ページ全体が読み込まれる前に何かを変更しようとすると、IE6 / 7のようなうるさいブラウザがダミーを吐き出します。
はい、可能です。解決策の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、新しいウィンドウ/タブ内に表示されます。
submit()呼び出すことです。フォームとその要素を作成する方法を示すために、意図的に長いフォーム作成コードを提供しました。これは大丈夫だと思います。
'method': postを達成するために使用します。
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');
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();
はい、引用符を忘れただけです...
$('<form/>').attr('action','form2.html').submit();
<body>動作を開始する前に追加する必要があります。
Content-Disposition: Attachment;ダウンロードを強制するためのサーバー側ヘッダーです。
Content-Type: application/octet-stream;。ありますdownloadアンカー内の属性は...クライアント側のもの（davidwalsh.name/download-attribute）