人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

PHP とjavascriptを使って、チェックボックスの真偽により「入力方法の切り替え」をしたいので、どなたか教えてください。サンプルページでも結構です。

作りたいのは、画面のチェックボックスが真のときはキーボードから直接入力し、そうで無いときはドロップダウンリストから選択できる年月日の入力欄です。チェックボックス内容は毎回指定しなくて良いように、どこかに記憶させたいと思います。

javascriptからDOMを利用すればいいのかと思ってテストを始めましたが、なかなかうまく動作しません。またこの方法だと枠線や文字を含めてレイアウトするとやたら複雑なものになりそうです。もっとシンプルな方法(たとえばPHPで、フラグにより異なるファイルをincludeするような、あるいはVBでVisibleを設定するような)はないでしょうか。


●質問者: mouitchou
●カテゴリ:インターネット ウェブ制作
✍キーワード:DOM JavaScript PHP キーボード シンプル
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● KUROX
●35ポイント

http://www.nishishi.com/javascript/2007/radio-text-display.html

http://f32.aaa.livedoor.jp/~azusa/index.php?t=js&p=radiochec...

◎質問者からの返答

まさにこれらの機能が欲しかったものです。ありがとうございます。


2 ● GEN111
●35ポイント ベストアンサー

DOM 的に要素を操作するのが正当だと思いますが、span や div で囲んで innerHTML を書き換えるというのもありではないでしょうか。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
 <head>
 <style type="text/css">
 </style>

 <script type="text/javascript">
 function changeInputType(checked) {
 if (checked) {
 dateHTML = '<select name="year">' ;
 for (i = 0; i < 10; ++i) {
 year = (new Date).getFullYear() - i ;
 dateHTML += '<option value="2006">'+year+'</option>' ;
 }
 dateHTML += '</select>年' ;
 dateHTML += '<select name="month">' ;
 for (i = 1; i <= 12; ++i) dateHTML += '<option value="'+i+'">'+i+'</option>' ;
 dateHTML += '</select>月' ;
 dateHTML += '<select name="day">' ;
 for (i = 1; i <= 31; ++i) dateHTML += '<option value="'+i+'">'+i+'</option>' ;
 dateHTML += '</select>日' ;
 document.getElementById('date').innerHTML = dateHTML ;
 }
 else {
 document.getElementById('date').innerHTML = '<input type="text" name="date" />年月日' ;
 }
 }

 onload = function() {
 changeInputType(document.getElementById('inputtype').checked) ;
 }
 </script>
 </head>

 <body>
 <form name="myform" id="myform">
 <input type="checkbox" id="inputtype" onclick="changeInputType(this.checked)" />
 <span id="date"><input name="date" type="text" /></span>
 </form>
 </body>
</html>

JavaScript DOM リファレンス

◎質問者からの返答

こちらの方法も大変良さそうです。実戦にマッチするか組み込んで確かめてみます。

有り難うございました。

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ