|
|
| CGIに役立つJavaScript |
- ここまでのDynamicHTMLだけでも十分ページのデザインを拡張することができましたが、
JavaScriptを使って機能的にも使いやすく、ミスを防ぐ手法をご紹介しましょう。
- 未記入の項目をチェックする
CGIで未記入項目をチェックする場合は、一度サーバに送信してCGIが未記入項目をチェックしてエラーを出力しますので、
無駄な時間と、サーバにも負担がかかる事になります。JavaScriptでチェックすれば送信前にチェックすることができます。
<p>
<form name=Myform>
<input type=text name=name
value=''>
<input type=button value=送信する onclick=GoSubmit();>
</form>
</p>
<script>
function GoSubmit() {
if(document.Myform.name.value==''){
alert('お名前が記入されていません');
return;
}else{
alert('正常に送信しました');
}
}
</script>
|
|
自動的に未記入項目にカーソルを移動するにはfocus()を使用します。
<p>
<form name=Myform>
<input type=text name=name
value=''>
<input type=button value=送信する onclick=GoSubmit();>
</form>
</p>
<script>
function GoSubmit() {
if(document.Myform.name.value==''){
alert('お名前が記入されていません');
document.Myform.name.focus();
return;
}else{
alert('正常に送信しました');
}
}
</script>
|
|
- 送信ボタンを無効にする
掲示板の送信や投稿ボタンは必要項目が記入されて押していただかなければ意味がありません。
前項で説明したように未記入の場合は、チェックして送信しなければいいのですが、
返信記事のように既に項目にデータが有る場合は、ユーザが変更していなくても送信されてしまいます。
また、変更や訂正を行う場合でも変更されていなければ送信する必要はありません。
<p>
<form name=Myform>
<input type=text name=name
value=''
onchange=EditFlag=1>
<input type=button value=送信する onclick=GoSubmit();>
</form>
</p>
<script>
var EditFlag=0;
function GoSubmit() {
if(EditFlag)
{
if(document.Myform.name.value==''){
alert('お名前が記入されていません');
document.Myform.name.focus();
return;
}
alert('正常に送信しました');
}
}
</script>
|
|
この例では、テキストボックスが編集されていなければ送信ボタンは何のアクションも起こしません。
実際には、alert('正常に送信しました');の部分にdocument.Myform.submit();を置くと送信されます。
- 送信ボタンを無効にする(その２)
前項では編集されたかをEditFlagというフラグを立てて管理していました。
これで、未記入や、未編集の場合は、フォームのデータは送信されなくなりましたが、
もう１つ掲示板でよく有るミスにダブルポスト(二重投稿)が有ります。
これは、サーが重い場合や、送信するデータが大きく時間がかかってしまうと投稿者が
投稿ボタンを複数回押してしまうという現象で起こってしまいます。
同じ記事が複数回送信される事を防ぐのもJavaScriptなら簡単に防ぐことができます。
<p>
<form name=Myform>
<input type=text name=name
value=''
onchange=EditFlag=1>
<input type=button value=送信する onclick=GoSubmit();>
</form>
</p>
<script>
var EditFlag=0;
function GoSubmit() {
if(EditFlag)
{
if(document.Myform.name.value==''){
alert('お名前が記入されていません');
document.Myform.name.focus();
return;
}
EditFlag=0;
document.Myform.submit();
}
}
</script>
|
|
document.Myform.submit();でフォームのデータを送信する直前でEditFlagを0に設定して送信ボタンを無効にしています。
これで送信に時間がかかっても送信ボタンは無効ですので２度目の送信を行うにはもう一度
テキストボックスのデータを編集しなければ送信できません。
- 画像アップロード
近年、画像をアップロードする掲示板が流行のようですが、そのほとんどが画像のサイズ(ファイルサイズ)でアップロードを制限しています。
確かに、サーバを圧迫する大きな画像は問題ですが、色数を減らせば巨大な画像もアップロードで来てしまうことになります。
訪問者のパソコンの解像度が1024×768の解像度なのに画像の大きさが1280×1024では何も見えなくなってしまいます。
次の関数は画像の縦横サイズを送信前に調べることができます。
送信前に調べるのですから、サーバに負担をかける事はありません。
<p>
<form name=Myform>
画像を指定:<input type=file name=upload
onchange=imgset();>
<input type=button value=画像のサイズ onclick="imagesize();"><p>
<img id=sampleimg src="images/Big.gif">
</form>
<table border=1>
<tr><td
align=center>幅</td><td
align=center>高さ</td></tr>
<tr><td id=w> </td><td id=h> </td></tr>
</table>
</p>
<script>
function imgset() {
var objid=document.getElementById('sampleimg');
objid.src='file://'+document.Myform.upload.value;
}
function imagesize() {
var objid=document.getElementById('sampleimg');
var wid=document.getElementById('w');
var hid=document.getElementById('h');
var imgwidth=objid.width;
var imgheight=objid.height;
wid.innerHTML=imgwidth;
hid.innerHTML=imgheight;
}
</script>
|
|
- 入力フィールドの初期値
テキストボックスやテキストエリアに値を設定する時、
<input type=text
name=area value="初期値">
この値を変更するには
document.Myform.area.value='新しい値';
のように変更しますが、この場合フォームのリセットボタン
<input type=reset value=リセット>を押すと最初の「初期値」に戻ります。
JavaScriptではリセットされた場合に戻る初期値も変更できます。
<p>
<form name=Myform>
お名前:<input
type=text name=name
value=初期値>
<input
type=reset value=リセット><p>
文字を変更してリセットを押すと元に戻ります。<p>
<input
type=button value="初期値変更"
onclick="document.Myform.name.defaultValue='Terra(テルラ)'"><p>
ここを押すと初期値が変更されています。
</form>
|
|
|
|
|
