jqueryでテキストを追加、削除

ホームページの中で何かが起きたときにテキストを表示させたい事はありますよね。
そんなときのTips

<div id="msg"></div>

のdivとdivの間にメッセージを表示させるとしたら
jqueryで

$(function(){
   $("#msg").text("エラーです。")
});

と書くことで下記のように挿入することができます。

<div id="msg">エラーです。</div>

今度はdivの間に上記のように入っている文字を消すときは

$(function(){
   $("#msg").text("")
});

空にすると、<div id="msg"></div>の中の文字が消せます。

フォームの入力チェックを行う

テキストの追加と削除を使ってフォームのチェックをしてみましょう。
文字を入れなかったらエラーが表示されて、文字を入れたらエラーが消されるように作ってみました。

上記のhtmlタグ

<div id="msg"></div>
  <input type="text" id="name" value=""  />
<input type="submit" value="送信" />

jqueryでの入力チェックタグ

$(function(){
 $(":submit").click(function(){
	  if($(":text").val() == ""){
           $("#msg").text("入力されていません。")
      return false;
	  }else{
           $("#msg").text("")
       }
    });
});

で送信するまえに簡単にチェックを行うことができます。
実際はformタグで飛ばしさきを指定すると入力があるとデータが送信されます。


コメントする