POST – 東京発、雲に乗って

別ウィンドウを開く際にPOSTでパラメータを送るには、
window.openで空のページを開いてから
そこに対してSUBMITを行います。

ページ上のフォームからもできますし、
フォームのないページでもPOSTできます。

まずは、ページ上のフォームからSUBMITする場合：

JavaScript

function post_open() {
  window.open('', 'new_window');
  document.form1.action = 'page2.php';
  document.form1.method = 'POST';
  document.form1.target = 'new_window';
  document.form1.submit();
}

function post_open() {

window.open('', 'new_window');

document.form1.action = 'page2.php';

document.form1.method = 'POST';

document.form1.target = 'new_window';

document.form1.submit();

}

HTML

<form name="form1">
<input type="hidden" name="param1" value="hoge"/>
<input type="hidden" name="param2" value="hage"/>
<input type="button" value="送信" onclick="post_open();"/>
</form>

</form>

開いたウィンドウに名前をつけて、
その名前をtargetで指定するだけなので難しくないですね。

次に、フォームのないページでPOSTする場合：
※jQueryを使っています。

JavaScript

function post_open() {
  window.open('', 'new_window');

  // フォームを動的に生成
  var html = '<form id="temp_form" style="display:none;">';
  var data = {
    'param1': 'hoge'
   ,'param2': 'hage'
  };
  for(var x in data) {
    if(data[x] == undefined || data[x] == null) {
      continue;
    }
    var _val = data[x].replace(/'/g, '\'');
    html += "<input type='hidden' name='" + x + "' value='" + _val + "' >";
  }
  html += '</form>';
  $("body").append(html);

  $('#temp_form').action = 'page2.php';
  $('#temp_form').method = 'POST';
  $('#temp_form').target = 'new_window';
  $('#temp_form').submit();

  // フォームを削除
  $('#temp_form').remove();
}

function post_open() {

window.open('', 'new_window');

// フォームを動的に生成

var html = '<form id="temp_form" style="display:none;">';

var data = {

'param1': 'hoge'

,'param2': 'hage'

};

for(var x in data) {

if(data[x] == undefined || data[x] == null) {

continue;

}

var _val = data[x].replace(/'/g, '\'');

html += "<input type='hidden' name='" + x + "' value='" + _val + "' >";

}

html += '</form>';

$("body").append(html);

$('#temp_form').action = 'page2.php';

$('#temp_form').method = 'POST';

$('#temp_form').target = 'new_window';

$('#temp_form').submit();

// フォームを削除

$('#temp_form').remove();

}

FORMタグがない状況でJavaScriptからパラメータをPOSTで渡す関数です。

var post_submit = function(url, data) {
  // FORMがなければ作ればいいじゃない。
  var _html = '<form method="POST" action="' + url + '" id="temp_form" style="display:none;">';
  for(var x in data) {
    _html += '<input type="hidden" name="' + x + '" value="' + data[x] + '" >';
  }
  _html += '</form>';
  $("body").append(_html);

  $('#temp_form').submit();
  $('#temp_form').remove();
};

var post_submit = function(url, data) {

// FORMがなければ作ればいいじゃない。

var _html = '<form method="POST" action="' + url + '" id="temp_form" style="display:none;">';

for(var x in data) {

_html += '<input type="hidden" name="' + x + '" value="' + data[x] + '" >';

}

_html += '</form>';

$("body").append(_html);

$('#temp_form').submit();

$('#temp_form').remove();

};

引数のdataには連想配列でパラメータを渡します。

タグ: POST

【JavaScript】別ウィンドウを開く際にPOSTでパラメータを送る

【JavaScript】FORMタグのないページからPOST送信する