タグ別アーカイブ: Javascript

Javascript：「ajaxzip3」で郵便番号から住所を自動入力

Posted on by
返信

お問い合わせフォームなどで郵便番号を入力すると自動で住所が入力されるフォームがあります。

郵便番号検索ができる「ajaxzip3」を使用すると簡単に設置することが可能です。
ユーザビリティの向上にもなると思うし、とても使いやすいです。

下記に「ajaxzip3」を設置した時の方法をメモします。

ajaxzip3

■ 「ajaxzip3」の使用方法

今回、都道府県をセレクトボックスを使用して設置してます。

【Javascript】

下記のJSファイルを読み込みます。

<script src="http://ajaxzip3.googlecode.com/svn/trunk/ajaxzip3/ajaxzip3.js"></script>

httpsの場合は下記を記述します。

<script src="https://ajaxzip3.googlecode.com/svn/trunk/ajaxzip3/ajaxzip3-https.js"></script>

【PHP】

<?php
// 都道府県
function get_pref() {
    return array(
        1 => '北海道',
        2 => '青森県',
        3 => '岩手県',
        4 => '宮城県',
        5 => '秋田県',
        6 => '山形県',
        7 => '福島県',
        8 => '茨城県',
        9 => '栃木県',
        10 => '群馬県',
        11 => '埼玉県',
        12 => '千葉県',
        13 => '東京都',
        14 => '神奈川県',
        15 => '新潟県',
        16 => '富山県',
        17 => '石川県',
        18 => '福井県',
        19 => '山梨県',
        20 => '長野県',
        21 => '岐阜県',
        22 => '静岡県',
        23 => '愛知県',
        24 => '三重県',
        25 => '滋賀県',
        26 => '京都府',
        27 => '大阪府',
        28 => '兵庫県',
        29 => '奈良県',
        30 => '和歌山県',
        31 => '鳥取県',
        32 => '島根県',
        33 => '岡山県',
        34 => '広島県',
        35 => '山口県',
        36 => '徳島県',
        37 => '香川県',
        38 => '愛媛県',
        39 => '高知県',
        40 => '福岡県',
        41 => '佐賀県',
        42 => '長崎県',
        43 => '熊本県',
        44 => '大分県',
        45 => '宮崎県',
        46 => '鹿児島県',
        47 => '沖縄県'
    );
}
?>

【HTML】

郵便番号を2つのテキストボックスに分けています。
郵便番号のテキストボックスは1つでも可能です。

<input type="text" name="zip1" value="" maxlength="3" /> - 
<input type="text" name="zip2" value="" maxlength="4" onKeyUp="AjaxZip3.zip2addr('zip1','zip2','pref','address');" />
<br>
<select name="pref">
    <option value="">選択</option>
    <?php foreach (get_pref() as $key => $value): ?>
    <option value="<?php echo $key; ?>"><?php echo $value; ?></option>
    <?php endforeach; ?>
</select>
<br>
<input type="text" name="address" value="" />

2つ目の郵便番号の入力が終わると自動的に住所が入力されます。

Javascript：ボタン押下時、確認メッセージを出力

Posted on by
返信

submitボタンを押したときに確認のメッセージボックスを出力し、「OK」が押された時のみサブミットしたい場合があります。
Javascriptを使用してsubmitボタン押下時に確認メッセージを出力する方法をメモします。

いつも忘れてしまいます。。。

■ onclick時にconfirm()を使用し、ダイアログを出力

<input type="submit" value="実行" onclick="return confirm('実行しますか？');">

「OK」をクリックした時はtrueを返し、「キャンセル」をクリックした時はfalseを返します。

■ 「OK」と「キャンセル」で処理を分岐する

【Javascript】

<script type="text/javascript">
function submitbtn() {
    // 「OK」ボタン押下時
    if (confirm('実行しますか？')) {
        alert('OK');
    }
    // 「キャンセル」ボタン押下時
    else {
        alert('キャンセル');
    }
}
</script>

【HTML】

<input type="submit" value="実行" onclick="submitbtn();">

「OK」と「キャンセル」で別の処理を追加することが可能です。

Javascript：選択したラジオボタンのチェックを外す方法

Posted on by
返信

ラジオボタン選択後にチェックしたものを外したい場合があります。
Javascriptを使用すればチェックしたラジオボタンをリセットすることが可能です。

Javascriptを使用し選択されているラジオボタンのチェックを外す方法をメモします。

■ 選択したラジオボタンのチェックを外す

【HTML】

チェックを外すためのリンクを用意し、クリックした際にJavascriptを呼び出します。

<a href="javascript:void(0);" onclick="resetradio()">リセット</a>

ラジオボタンのidを連番で指定します。

<label for="radio1"><input type="radio" name="hoge" id="radio1" value="1" />ラジオボタン1</label>
<label for="radio2"><input type="radio" name="hoge" id="radio2" value="2" />ラジオボタン2</label>
<label for="radio3"><input type="radio" name="hoge" id="radio3" value="3" />ラジオボタン3</label>
<label for="radio4"><input type="radio" name="hoge" id="radio4" value="4" />ラジオボタン4</label>
<label for="radio5"><input type="radio" name="hoge" id="radio5" value="5" />ラジオボタン5</label>

【javascript】

呼び出されたらラジオボタンの数だけfor文でループさせ、ラジオボタンのチェックを外しています。

<script type="text/javascript">
function resetradio() {
    for (i = 1; i <= 5; i++) {
        document.getElementById('radio' + i).checked = false;
    }
}
</script>

Javascript：Javascriptで現在の日付を取得する

Posted on by
返信

Javascriptで現在の日付を取得する場合は、Dateオブジェクトを使用します。
日付や時間の取得はよく使うので、メモします。

■ Dateオブジェクト

現在の日時または指定した日時の日付オブジェクトを生成します。

now = new Date();

■ 現在の日付を取得する

下記のように、生成したDateオブジェクトから
一つ一つの値を取得していきます。

	// Dateオブジェクトを生成
	now = new Date();

	// 年を取得
	//y = now.getYear();
	y = now.getFullYear();

	// 月を取得
	m = now.getMonth() + 1;

	// 日を取得
	d = now.getDate();

	// 時を取得
	h = now.getHours();

	// 分を取得
	i = now.getMinutes();

	// 秒を取得
	s = now.getSeconds();

	alert(y + '年' + m + '月' + d + '日 ' + h + '時' + i + '分' + s + '秒');

年の取得はgetYear()かgetFullYear()を使用します。
getYear()で取得した場合は、ブラウザやバージョンによって
2013を取得する場合と113を取得する場合に分かれるそうです。
なので3桁で取得した場合は1900をプラスして使用する必要があります。

	// 年を取得
	y = now.getYear();

	if ( y < 1900 ) {
		y = y + 1900;
	}

今であればgetFullYear()を使用したほうがいいと思います。
昔は使えなかったみたいですが。

月の取得は0～11の値が取得されるので、
下記のように1プラスしています。

	// 月を取得
	m = now.getMonth() + 1;

jQuery：jQueryでsubmit（サブミット）する方法

Posted on by
1

jQueryを使用し、フォームの値をsubmitする方法をメモします。

送信したいデータを変形や追加、バリデーションのチェックなど
jQueryやjavascriptを使用するとデータを送信する前に処理することが可能です。
色々な用途で使用できます。

いつも忘れてしまうので、jQueryでformをsubmitする方法と
javascriptでformをsubmitする方法をメモします。

■ jQueryでsubmitする方法

【jQuery】

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('#form1').submit(function() {
        // 処理
    });
});
</script>

または次のように記述します。
ボタンがクリックされた場合、サブミットしています。
私はこちらの方を使う方が多いです。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('#btn').click(function() {
        $('#form1').submit();
    });
});
</script>

【HTML】

<form method="post" name="form1" id="form1">
    <input type="text" name="txt" value="" />
    <input type="submit" name="btn" id="btn" value="submit">
</form>

■ javascriptでsubmitする方法

【javascript】

<script type="text/javascript">
function func_submit() {
    document.form2.submit();
}
</script>

【HTML】

<form method="post" name="form2" id="form2">
    <input type="text" name="txt" value="" />
    <input type="submit" name="btn" id="btn" value="submit" onclick="func_submit();" />
</form>