JavascriptでFormのsubmitを行う

FormのsubmitをJavascriptで行う方法です。

ボタンでsubmitする場合は、以下のように書きます。

<input type="submit" value="登録">

Javascriptで実行する場合は以下のようにします。

<script>
function do_submit() {
  document.forms['hoge'].submit();
}
</script>

<form method="post" name="hoge" action="index.php">
<input type="text" name="name" />
<input type="submit" value="登録" />
</form>

<input type="button" value="登録" onClick="do_submit();">

type=”submit”をクリックしても、type=”button”をクリックしても同じように動作します。
Javascriptの方のforms['hoge']には、formタグのname=”hoge”の値をセットします。

また、Javascriptの方で変数を追加してpostしたいということがよくあると思います。
jQueryを使って以下のようにしてやります。

$('<input>').attr({
  type: 'hidden',
  id: 'hoge_id',
  name: 'hoge',
  value: 'ほげ'
}).appendTo('#target_id');

これで、id=”target_id”の要素に、inputタグのtype=”hidden”が追加されます。

まとめると、以下のようになります。

<script>
function do_submit() {
  $('<input>').attr({
    type: 'hidden',
    id: 'hoge_id',
    name: 'hoge',
    value: 'ほげ'
  }).appendTo('#target_id');
  document.forms['hoge'].submit();
}
</script>

<form method="post" name="hoge" action="index.php">
<div id="target_id">
  <input type="text" name="name" />
  <input type="submit" value="登録" />
</div>
</form>

<input type="button" value="登録" onClick="do_submit();">

CakePHPでレイアウトファイルを指定する

CakePHPでは、デフォルトのレイアウトファイルは
View/Layouts/default.ctp
です。

これを別のレイアウトファイルを使用する場合は、
コントローラーに以下のようにしています。

$this->layout = "sample";

同時に、
View/Layouts/sample.ctp
というファイルを作成しておきます。

これで、sample.ctpというレイアウトファイルが使用されます。

HTMLで印刷用ページを作成する

印刷ボタンを用意して、クリックすると印刷用ページを開くという実装を行ったのでメモ。
通常は、Web表示用と印刷用でそれぞれのCSSを用意して、
印刷したい場合だけ印刷用のCSS(print.cssなど)が適用されるように実装します。

印刷ボタンを以下のようにして設置することで印刷が実行されます。

<button onclick="window.print()">印刷する</button>

今回は、別途印刷専用のページを用意して、そのページを開くと印刷が実行されるように実装しました。
で、ページを開くとすぐに印刷が実行されるようにするにはどうするか?と思い
とりあえず以下を入れてみたらOKでした。簡単でした・・・。

<script>
window.print();
</script>

Javascriptで確認ダイアログを表示する

Javascriptで、「OK」か「キャンセル」かを選択できる確認ダイアログを表示する方法です。

window.confirm()を使用します。

<script>
function kakunin() {
  if(window.confirm("")) {
    //OKをクリックした場合の処理

  } else {
    //キャンセルをクリックした場合の処理

  }
}
</script>

<input type="button" value="確認" onClick="kakunin()" />

PHPでディレクトリごとコピーする

PHPのcopy関数は、ファイルのコピーを行いますが、
ディレクトリごとコピーすることができません。

ディレクトリごとコピーする方法がないか調べていたところ、
そのものズバリの関数を作成されている方がいらっしゃったのでそのまま使わせてもらいました。

//------------------------------------------------------------------------------
// ディレクトリ階層以下のコピー
// 引数: コピー元ディレクトリ、コピー先ディレクトリ
// 戻り値: 結果
function dir_copy($dir_name, $new_dir)
{
  if (!is_dir($new_dir)) {
    mkdir($new_dir);
  }

  if (is_dir($dir_name)) {
    if ($dh = opendir($dir_name)) {
      while (($file = readdir($dh)) !== false) {
        if ($file == "." || $file == "..") {
          continue;
        }
        if (is_dir($dir_name . "/" . $file)) {
          dir_copy($dir_name . "/" . $file, $new_dir . "/" . $file);
        }
        else {
          copy($dir_name . "/" . $file, $new_dir . "/" . $file);
        }
      }
      closedir($dh);
    }
  }
  return true;
}

以下のサイトを参考にさせて頂きました。
・ディレクトリ全コピー関数 | Search A.I.

Javascriptで足し算を行う際に気をつけること

Javascriptで足し算をしようと何も考えずに

var hoge = 2;
var hoge = hoge + 4;

とすると、hogeは6ではなく、24になってしまいます。

Javascriptでは、足し算だけではなく、文字列の連結も「+」で行います。
ですので、この場合、文字列の連結とみなされて「24」となってしまうのです。

では、数値計算したい場合はどうするか?
以下のようにして、文字列を数値型に変換します。

var hoge = 2;
var hoge = parseInt(hoge) + 4;

parseInt(hoge)だけではなく、eval(hoge)も使えます。
あと、マイナス(-)は数値型として計算してくれますので、以下のようにする方法もあります。

var hoge = 2;
var hoge = hoge - (-4);

バグの元になりやすいので気をつけたいですね。

jQueryでリンク先を変更する方法

jQueryでリンク先のURLを変更する方法を調べたのでメモ

<a href="http:\\hoge.com/">Hoge</a>

上記のようなリンクのURLをjQueryから変更する方法です。
aタグにid=”hoge”を追加します。

<a href="http:\\hoge.com/" id="hoge">Hoge</a>

以下のようにして、リンク先を置き換えます。

$("#hoge").attr("href", "http:\\hogehoge.com/");

ブラウザでレーダーチャートを表示する

レーダーチャートを表示できるjQueryライブラリがないか調べたところ、
簡単に表示できるものが見つかったのでメモ。

Jquery Canvas Chart

html5のcanvasを使って表示しているようです。

Jquery Canvas Chartから、jquery.canvasChart.jsとexcanvas.jsをダウンロードします。

jQueryと、ダウンロードしたjsファイルを読み込みます。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="./js/jquery.canvasChart.js"></script>

<!--[if IE]><script type="text/javascript" src="./js/excanvas.js"></script><![endif]-->

レーダーチャートで表示したい値の指定はinputタグのhiddenで行います。

<div id="canvasChart">
  <canvas width="380" height="380"></canvas>
  <div class="chartInput">
    <input type="hidden" value="5" id="input1" name="input1" />
    <input type="hidden" value="4" id="input2" name="input2" />
    <input type="hidden" value="5" id="input3" name="input3" />
    <input type="hidden" value="3" id="input4" name="input4" />
    <input type="hidden" value="2" id="input5" name="input5"  />
  </div>
</div>

レーダーチャートの設定を行います。

<script type="text/javascript">
$(function(){
  $('#canvasChart').canvasChart({
    //各種設定
  });
});
</script>

以上で、とりあえずレーダーチャートの表示ができてしまいます。







線の色や塗りつぶしの色、レーダーの形など、各種設定が可能です。
設定項目はJquery Canvas Chartを参照ください。

jQueryで要素が存在するのかをチェックする方法

jQueryで要素が存在するかをチェックする方法です。

jQueryを使って複数のhtmlファイル内で共通の処理を実装させようとしていたときに、
特定の要素が存在するかどうかで、処理を分けたいということがあったのでメモ。

size()で判定できます。

調べたい要素がid=”hoge”で指定されている場合、

if ($("#hoge").size() > 0) {
  //存在する場合の処理
} else {
  //存在しない場合の処理
}

以下を参考にさせて頂きました。
JQuery | 要素の存在を確認する | crossover

jQueryでinputの値を取得する

jQueryでinputの値を取得する方法です。
val()で取得できます。

id=”tel”で指定したinputタグの値は、以下のようにして取得します。

$("#tel").val();

逆に値を設定する場合は、val()に値を入れてやります。

var tel_no = "03-0000-0000";
$("#tel").val(tel_no);