
JavaScriptの有効/無効でフォームの”必須”項目の文言を切り替える方法
まず、<html> タグにクラス名「no-js」を付与します。
<!DOCTYPE html>
<html lang="ja" class="no-js">
<head>
<!-- head内の記述 -->
</head>
<body>
<!-- body内の記述 -->
</body>
</html>
↓
<th>タグ内に”JS有効/無効時”の文言を2つとも記述し、別々のクラス名を付与します。
<!DOCTYPE html>
<html lang="ja" class="no-js">
<head>
<!--head内の記述-->
</head>
<body>
<table>
<tr>
<th>名前
<span class="entry_form_item_js">必須</span>
<span class="entry_form_item_no-js">資料請求のみ必須</span>
</th>
<td>
<input type="text">
</td>
</tr>
<tr>
<th>カナ
<span class="entry_form_item_js">必須</span>
<span class="entry_form_item_no-js">資料請求のみ必須</span>
</th>
<td>
<input type="text">
</td>
</tr>
</table>
</body>
</html>
↓
続いて、JSが有効になっている時は、「no-js」クラスが削除される様、jQueryのremoveClassメソッドを記述します。
$(function(){
$('html').removeClass('no-js');
});
最後に、表示/非表示の設定をCSS側で行います。
/* CSS側の設定*/
.no-js .entry_form_item_js{ display: none !important; }
.entry_form_item_no-js { display: none !important; }
.no-js .entry_form_item_no-js { display: block !important; }
↓上述のコードを全てまとめるとこんな感じ。
<!DOCTYPE html>
<html lang="ja" class="no-js">
<head>
<meta charset="UTF-8">
<title>入力フォーム</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript">
$('html').removeClass('no-js');
</script>
<style type="text/css">
.no-js .entry_form_item_js{ display: none !important; }
.entry_form_item_no-js { display: none !important; }
.no-js .entry_form_item_no-js { display: block !important; }
</style>
</head>
<body>
<table>
<tr>
<th>名前
<span class="entry_form_item_js">必須</span>
<span class="entry_form_item_no-js">資料請求のみ必須</span>
</th>
<td>
<input type="text">
</td>
</tr>
<tr>
<th>カナ
<span class="entry_form_item_js">必須</span>
<span class="entry_form_item_no-js">資料請求のみ必須</span>
</th>
<td>
<input type="text">
</td>
</tr>
</table>
</body>
</html>
まとめ
- ページの全要素にクラス名「no-js」が付与されているものの、JSが有効の時は、removeClassメソッドが呼び出され、「no-js」は削除される。
- JSが無効の時は、removeClassメソッドが呼び出されない為、ページの全要素に「no-js」は付与されたまま。
- JSが有効な時は「no-js」がつかない。逆に無効の時は「no-js」がつく。それを利用し、CSS側の設定で項目の表示を切り替える。
もっとWebデザインを勉強したい!!
実績No.1のオンライン・プログラミングスクール!
マンツーマンだから自分のペースで確実に習得できる ・レッスン満足度94.6%!
時間と場所を選ばずに学習でき、就職/転職やキャリアについての相談が無料でできます!!
無料体験レッスンを受講すると受講料が1万円引になります!!
気になる方はコチラ↓↓↓↓↓↓↓