ゆいまるのプログラミング日和: フォーム

2015年6月14日日曜日

Laravel5と郵便番号用ajaxのajaxzip3.js

Laravel5でちょっとしたWebシステムを開発することになった。ちなみに、２０１４年１０月ごろにはLaravel4でWebシステムを開発した。Laravel4とLaravel5はフォルダの配置とデフォルトの設定が随分変わったので、最初かなり戸惑った。

それはさて置き、 ajaxzip3.jsと郵便番号の話です。フォームに郵便番号を入れると住所欄に住所が入るWEBページがよくあります。自分で作らなければいけないと思い、日本郵便のページから郵便番号のファイルをダウンロードして、簡単なプログラムを書いて、郵便番号のデータをMySQLに取り込んだ。

＜2015/6/14追加＞
Google Codeがサービス廃止になり、Githubに移行したそうです。私のページも動かなくなったので驚きましたが、理由が分かれば、安心。
Github移行を機にこれまでhttp、httpsで分かれていたURLを一本化したそうです。
今後は、https://ajaxzip3.github.io/ajaxzip3.js に成ります。(http://でも使えるみたいですが、基本はhttps://です。)
今までは、http://ajaxzip3.googlecode.com/svn/trunk/ajaxzip3/ajaxzip3.js　だった。下記の部分もこの部分は読み替えてください。書き換えてください。

その後Javascriptの見本が見たくて、Googleで検索したら、ajaxzip3 と言う、驚異的なページを見つけてしまった。 ajaxzip3.jsを使えば、もう自分で郵便番号を用意する必要はない。ホームページに書くコードも至極簡単だ。ヘッダーの中で下記：

http://ajaxzip3.googlecode.com/svn/trunk/ajaxzip3/ajaxzip3.jsを読み込み。

本文のフォームの中に下記のように書く（私が書いたコードで、余分に、class="eisu"とtype="tel"で英数字化、placeholder="453"でグレーの初期値表示、onKeyPress="return submitStop(event)で改行キーでの送信の拒否、を入れている）。データベースを3桁4桁にしているので、入力用フォームも3桁4桁に分けている。
<td>
<input class="eisu" maxlength="3" placeholder="453" onKeyPress="return submitStop(event);" name="zip21" type="tel" value="">
</td><td>
<input class="eisu" maxlength="4" placeholder="0042" onKeyUp="AjaxZip3.zip2addr(zip21,zip22,addr21,addr21);" onKeyPress="return submitStop(event);" name="zip22" type="tel" value="">
</td>
ajaxzip3の動作見本ページはここです。

ajaxzip3のURLを見ると、https://code.google.com/p/ajaxzip3/と、google.comのドメインになっている。ajaxzip3.jsの設置場所も、googlecode.comになっている。Google Project Hostingというページで、オープンソースをGoogleが応援しているようだ。Googleがこのようなことを行っているのははじめて知った。（上に追加で記したように、Google Codeはサービス廃止だそうです。）

2014年9月20日土曜日

text入力欄でEnterキーを押してもフォームを送信しないJavascript

ホームページのフォームでtext入力欄を３つ作って、公開したとする。利用者が、最初のtext欄に入力して、Enterキー（リターンキー）を押したとすると、他の２ケ所を入れる前に、意図せずフォームが送信されてしまう。

text入力欄でEnterキーを押してもフォームを送信しない方法と、そのときに同時にエラーメッセージを表示する方法のjavascriptを書いておきますので利用してください。

下記のjavascriptを<head></head>の間にコピーする。function formcheck()がエラーメッセージの表示。function submitStop(e）がEnterキーを押したときの動作を制御して、フォームを送信させないようにする部分。

<table></table>は<body>のformに記述する。

<!--

function formcheck(){

var flag = 0;

if(document.formwebtest.secid.value == ""){

flag = 1;

}else if(document.formwebtest.secmail.value == ""){

flag = 1;

}else if(document.formwebtest.secname.value == ""){

flag = 1;

}

if(flag){

window.alert("必須項目が未入力");

return false;

}else{

return true;

}

function submitStop(e){

if (!e) var e = window.event;

if(e.keyCode == 13)

return false;

}

// -->

</script>

<table>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

丁寧に説明されているページ--<input type="text">ではEnterを押すと勝手にsubmitされてしまうことがある。Enterでのsubmitを防ぎたいとき。