質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.34%

JavaScript プルダウン選択時の動作について

受付中

回答 3

投稿

  • 評価
  • クリップ 0
  • VIEW 2,209

BANDIT1250FABS

score 84

プルダウン内の「その他」選択時にのみテキストボックスを表示したいと思い、下記コードにて実装したのですがテキストボックスの内容をpostでcgiに渡せませんでした

<script type="text/javascript" >
 $(function() {
     $('select[name="SELECTBOX"]').change( function() {
          var $attribute = document.getElementById('VALUE').value;
          var $s_input = document.getElementById('DIV');
          if( $(this).val() == 1 ) {
               $s_input.innerHTML = $attribute + '<input type=\'hidden\' id=\'FORMNAME\' name=\'FORMNAME\' value= \' + $attribute + \'>' ;
          } else if( $(this).val() == 2 ) {
            $s_input.innerHTML = '<input type=\'text\' id=\'FORMNAME\' name=\'FORMNAME\' size=\'10\' maxlength=\'6\'>';
          } else {
               $s_input.innerHTML = '選択してください';
          }
    }).change();
});
</script>
<form method="post" action="/cgi-bin/index.cgi">
aaa<input type="hidden" id="VALUE" name="VALUE" value="aaa">

<select id="SELECTBOX" name="SELECTBOX">
     <option value="" selected>選択してください</option>
     <option value="1">選択1</option>
     <option value="2">選択2</option>
</select>

<div id="DIV" name="DIV"></div>

</form>


選択1の場合は、すでに表示されている「aaa」をdiv内に表示し、
選択2の場合は、テキストボックスを表示し、
postでcgiに、「aaa」もしくはテキストボックス入力値を
同じパラメータで渡したいと考えておりますが
どのようにコーディングすればよいかご教授いただけますでしょうか。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 3

+2

ほとんどよさそうでしたが、$attributeが文字列のままなっていたのと、submitボタンがないので追加しました。余談ですが、jQueryの記述とそうでない記述が混ざっているので、どちらかに寄せたほうがいいかもしれませんね

<script type="text/javascript" >
 $(function() {
     $('select[name="SELECTBOX"]').change( function() {
          var $attribute = document.getElementById('VALUE').value;
          var $s_input = document.getElementById('DIV');
          if( $(this).val() == 1 ) {
               $s_input.innerHTML = $attribute + '<input type=\'hidden\' id=\'FORMNAME\' name=\'FORMNAME\' value= \'' + $attribute + '\'>' ;
          } else if( $(this).val() == 2 ) {
            $s_input.innerHTML = '<input type=\'text\' id=\'FORMNAME\' name=\'FORMNAME\' size=\'10\' maxlength=\'6\'>';
          } else {
               $s_input.innerHTML = '選択してください';
          }
    }).change();
});
</script>
<form method="post" action="/cgi-bin/index.cgi">
aaa<input type="hidden" id="VALUE" name="VALUE" value="aaa" >

<select id="SELECTBOX" name="SELECTBOX">
     <option value="" selected>選択してください</option>
     <option value="1">選択1</option>
     <option value="2">選択2</option>
</select>

<div id="DIV" name="DIV"></div>
<input type='submit'>
</form>

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/10/13 09:59

    ご回答いただき、ありがとうございます。
    やはりsubmitで渡した値は受け取れないみたいです。
    テキストボックスをハードコーディングしたら受け取れたんですが…
    innerHTMLの仕様の問題ですかね

    キャンセル

  • 2016/10/13 10:44

    よくわかりませんが...
    ブラウザのデベロッパーツールで、innerHTMLで作成したinputがおかしくないかみてみたらどうでしょうか。ブラウザによって挙動が違う可能性もあるかもしれません。

    キャンセル

+2

毎回 input要素を生成しなくても非表示にすればいいのでは。

<script type="text/javascript" >
$( function() {
    $( 'select[name="SELECTBOX"]' ).change( function() {
        var attribute = '';
        var hide_flag = true;
        $( '#FORMNAME' ).val( '' ); // 初期化
        if ( $( this ).val() == 1 ) {
            attribute = $( '#VALUE' ).val();
        } else if( $( this ).val() == 2 ) {
            hide_flag = false;
            attribute = '';
        } else {
            attribute = '選択してください';
        }
        $( '#DIV' ).toggleClass( 'hide', hide_flag );
        $( '#SPAN' ).html( attribute );
    } ).change();
} ); // (未テスト)
</script>
<style>
.hide input, span {
    display: none;
}
.hide span {
    display: inline;
}
</style>
<form method="post" action="/cgi-bin/index.cgi">
    <input type="hidden" id="VALUE" name="VALUE" value="aaa">
    <select id="SELECTBOX" name="SELECTBOX">
        <option value="" selected>選択してください</option>
        <option value="1">選択1</option>
        <option value="2">選択2</option>
    </select>
    <div id="DIV" name="DIV" class="hide"><span id="SPAN" name="SPAN"></span><input type="text" id="FORMNAME" name="FORMNAME" size="10" maxlength="6"></div>
</form>

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

+1

参考までに

$(function() {
  $('select[name="SELECTBOX"]').on('change',function(){
    var attribute = $('#VALUE').val();
    switch($(this).val()){
    case "1":
      $('#DIV').html(attribute).append($('<input>').attr({type:"hidden",id:"FORMNAME",value:attribute})) ;
      break;
    case "2":
      $('#DIV').html($('<input>').attr({type:"text",id:"FORMNAME",name:"FORMNAME",size:10,maxlength:6})) ;
      break;
    default:
      $('#DIV').html('選択してください');
    }
  }).change();
});
<form method="post" action="/cgi-bin/index.cgi">
aaa<input type="hidden" id="VALUE" name="VALUE" value="aaa">

<select id="SELECTBOX" name="SELECTBOX">
     <option value="" selected>選択してください</option>
     <option value="1">選択1</option>
     <option value="2">選択2</option>
</select>
<div id="DIV" name="DIV"></div>
<input type='submit' value="go">
</form>

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.34%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る