somemo programming etc.

プログラマ、雑記、プログラミング関係はLinkから、数式はこっちでまとめていることが多い

【Javascript】リンクを押下してPOSTする【php】

リンクを押下してPOSTするスクリプトを書いてみました。Javascriptphpを使用しています。単純にPOSTするだけであれば、formとhiddenを用意してリンクのonclickイベントでformをsubmitするだけです。

hidden値

POSTしたい値を連想配列として用意します。これがhiddenのnameとvalueになります。複数渡したいものは、さらに配列にします。

// hidden値
$hidden_list = array(
  'name'    => 'value',
  'id'      => 123,
  'check[]' => array('a', 'b', 'c'),
);

formの作成

formを用意します。htmlとして用意するのではなく、Javascriptで作成するようにしています。これにより、コード量も減ります。

// formの作成
$onclick = "f = document.createElement('form'); "
         . "f.method = 'POST'; "
         . "f.action = this.href; "
         . "document.body.appendChild(f); ";

hiddenの作成

用意しておいたhiddenからJavascriptを作成します。複数渡したいものがある場合を考慮して、配列であるかを確認しています。

// hiddenの作成
foreach ($hidden_list as $name => $value) {
  if (is_array($value)) {
    foreach ($value as $value_piece) {
      $onclick .= createHiddenAppendScript($name, $value_piece);
    }
  } else {
    $onclick .= createHiddenAppendScript($name, $value);
  }
}

実際にhiddenからJavascriptを作成する部分です。

<?php
/**
 * hiddenを追加するJavascriptを作成する
 */
function createHiddenAppendScript($name, $value) {
  return "var h = document.createElement('input'); "
       . " h.type = 'hidden'; "
       . " h.name = '" . $name . "'; "
       . " h.value = '" . $value . "'; "
       . " f.appendChild(h); ";
}

formのsubmitと後処理

submitとformの削除、念のためにリンクでジャンプしても移動しないようにしています。

// formのsubmitと後処理
$onclick .= "f.submit(); "
         .  "document.body.removeChild(f); "
         .  "return false; ";
?>

実際にPOSTしてみる

久しぶりに生phpで書きました。フレームワークってすごいですね。リンクのonclickに今まで書いてきたJavascriptを割り当てます。あとは、POSTされていたら各値を表示しています。checkは配列なので連結しています。

<table border="1">
  <thead>
    <tr>
      <th>name</th>
      <th>value</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>name</td>
      <td><?php echo isset($_POST['name']) ? $_POST['name'] : '' ?></td>
    </tr>
    <tr>
      <td>id</td>
      <td><?php echo isset($_POST['id']) ? $_POST['id'] : '' ?></td>
    </tr>
    <tr>
      <td>check</td>
      <td><?php echo isset($_POST['check']) ? implode(', ', (array)$_POST['check']): '' ?></td>
    </tr>
  </tbody>
</table>
<a href="" onclick="<?php echo $onclick ?>" >POSTします</a>

ヘルパーとして使えば有効に再利用できそうです。また、実際にformやhiddenが作成されることを確かめたい場合、submitしないようにしてから、firebug等で見てみるといいでしょう。