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


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

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

回答の条件
  • URL必須
  • 1人3回まで
  • 登録:2007/08/25 14:47:26
  • 終了:2007/08/27 01:05:05

ベストアンサー

id:GEN111 No.2

GEN111回答回数472ベストアンサー獲得回数582007/08/25 17:39:17

ポイント35pt

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 リファレンス

id:mouitchou

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

有り難うございました。

2007/08/25 18:22:50

その他の回答(1件)

id:KUROX No.1

KUROX回答回数3542ベストアンサー獲得回数1402007/08/25 15:20:44

id:mouitchou

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

2007/08/25 18:11:48
id:GEN111 No.2

GEN111回答回数472ベストアンサー獲得回数582007/08/25 17:39:17ここでベストアンサー

ポイント35pt

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 リファレンス

id:mouitchou

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

有り難うございました。

2007/08/25 18:22:50
  • id:mouitchou
    GEN111さんの回答をもとに多少の変更を加えて、いわばブロック的に消したり現したりと思い通りの動作をさせることができました。ありがとうございました。

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません