as 5a3i: 【Javascript】オブジェクト表示/非表示の切り替え

同一テンプレートで正常時、エラー時の出し分けを実装したいときに
Javascript上で出し分けちゃおうということで。

次のhtmlをサンプルにする。
フォームの中が空なら「入力してね」を表示する。



<body onLoad="hideErrorParts();">
<form name="form1">
<input type="text" name="text1">
<input type="button" value="ボタン" onClick="checkForm();">
</form>
<span id="error">入力してね</span>

--以下の２点を実装する--
•ソースが呼び出されたときは「入力してね」は非表示。
•テキストボックスに入力してボタンを押した時にテキストボックスが空の場合に「入力してね」を表示。
実際のスクリプトが下記のようになる。

<script>
function hideErrorParts(){
document.getElementById("error").style.display = "none";
}

function checkForm(){
var content = document.form1.text1.value;

// テキストボックスの中が空なら表示する
if( content == "" ){
document.getElementById("error").style.display = "block";
}
}
</script>

display属性を"none"か"block"に変えちゃえば出し分けできるということですな。
簡単なバリデーションに使えそうです。（もちろんサーバ側でもバリデーションは実装しなきゃだが）

as 5a3i

2012年6月20日水曜日

【Javascript】オブジェクト表示/非表示の切り替え

1 件のコメント: