Formにおけるsubmitボタンが効かない

Question

■やりたいこと
１．２段階の連動型プルダウンメニューを選択する。
（ファイル名ソース1：document_select.php）
２．選択したあと、OKボタンを押下する。
３．POSTされた側で、２段階でセレクトされた２つの値を受け取る。
（ファイル名ソース2：document.php）

■つまづいている所
２のOKボタンが押下できません。

■ソース1:document_select.php

<form action="document.php" method="post"> <div class="pulldownset test"> ■動物を選ぶ： <select required name="select1" class="mainselect"> <option value="">動物の種類を選ぶ</option> <option value="ho">哺乳類</option> <option value="ha">爬虫類</option> <option value="ko">昆虫類</option> </select> <select required name="select2" id="ho" class="subbox"> <option value="">哺乳類を選択</option> <option value="ho1">ぞう</option> <option value="ho2">とら</option> <option value="ho3">ライオン</option> </select> <select required name="select2" id="ha" class="subbox"> <option value="">爬虫類を選択</option> <option value="ne1">へび</option> <option value="ne2">とかげ</option> <option value="ne3">カメレオン</option> </select> <select required name="select2" id="ko" class="subbox"> <option value="">昆虫類を選択</option> <option value="ka1">バッタ</option> <option value="ka2">蝶々</option> <option value="ka3">とんぼ</option> </select> </div> <input type="submit" style="width: 400px; height: 80px; font-size: 50px;" value="OK" /> </form> <script type="text/javascript"> // HTMLの読み込み直後に実行： document.addEventListener('DOMContentLoaded', function() { // ▼とりあえずサブBOXを全て非表示にする（CSSで書けば早いが） var allSubBoxes = document.getElementsByClassName("subbox"); for( var i=0 ; i<allSubBoxes.length ; i++) { allSubBoxes[i].style.display = 'none'; } // ▼全てのプルダウンボックスごとに処理 var mainBoxes = document.getElementsByClassName('pulldownset'); for( var i=0 ; i<mainBoxes.length ; i++) { var mainSelect = mainBoxes[i].getElementsByClassName("mainselect"); // メインのプルダウンメニュー（※後でvalue属性値を参照するので、select要素である必要があります。） mainSelect[0].onchange = function () { // 同じ親要素に含まれている全サブBOXを消す var subBox = this.parentNode.getElementsByClassName("subbox"); // 同じ親要素に含まれる.subbox（※select要素に限らず、どんな要素でも構いません。） for( var j=0 ; j<subBox.length ; j++) { subBox[j].style.display = 'none'; } // 指定されたサブBOXを表示する if( this.value ) { var targetSub = document.getElementById( this.value ); // 「メインのプルダウンメニューで選択されている項目のvalue属性値」と同じ文字列をid属性値に持つ要素を得る targetSub.style.display = 'inline'; } } } }); </script>

---

■ソース2:document.php

<?php $select_product = $_POST['select1']; echo "select1は"; echo $select_product; echo "デス。"; $select_product2 = $_POST['select2']; echo "select2は"; echo $select_product2; echo "デス。"; ?>

---

Comments

[kei344]

（質問文は編集できます）質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

[退会済みユーザー]

コードは ``` と ``` で囲ってください。インデントされて読みやすくなるので。インデントされてないコードは質問者さん自身も読む気がしないのでは？

Answer 1

document_select.phpはrequiredされてセレクトボックスをなにか選択すればOKできますね
動かないなら一度jsをすべて外してテストしてください

追記

なんかjsがエラーになってたので調整しました
送らないsubboxをdisabledにすればいいです

document.addEventListener('DOMContentLoaded', function() {
  var allSubBoxes = document.getElementsByClassName("subbox");
  for( var i=0 ; i<allSubBoxes.length ; i++) {
    allSubBoxes[i].style.display = 'none';
  }
  var mainBoxes = document.getElementsByClassName('pulldownset');
  for( var i=0 ; i<mainBoxes.length ; i++) {
    var mainSelect = mainBoxes[i].getElementsByClassName("mainselect");    
    mainSelect[0].onchange = function () {
      var subBox = this.parentNode.getElementsByClassName("subbox");    // 同じ親要素に含まれる.subbox（※select要素に限らず、どんな要素でも構いません。）
      for( var j=0 ; j<subBox.length ; j++) {
        subBox[j].style.display = 'none';
        subBox[j].disabled=true;
      }
      if( this.value ) {
        var targetSub = document.getElementById( this.value );    // 「メインのプルダウンメニューで選択されている項目のvalue属性値」と同じ文字列をid属性値に持つ要素を得る
        targetSub.style.display = 'inline';
        targetSub.disabled=false;
      }
    }
  }
});

Comments

[kimukimu009]

ご回答ありがとうございます。

初心者なので、もう少し詳しく教えてください。

jsが、邪魔しているということですか？

よろしくお願いいたします。

[yambejp]

失礼、jsを調整しました。確認してみてください

[kimukimu009]

ご回答、ありがとうございます！

うまくいきました！

ご指摘の通り、余計な、送らないsubboxがじゃましていたんですね。

実は、たまたま送信できたときがあったんですよ。
そのときは、また、たまたまうまく行ったんだと思いますが、
プルダウンの項目２つのうち、１つしかPOSTされていなかったんです。

今回の修正で、それも、改善されています。

本当に、ありがとうございました！

[yambejp]

> たまたま送信できたときがあったんですよ。

私も最初一つ一つのやつ全部選んで送信したので送れちゃいました
こまかい挙動調査をすると動いちゃうというジレンマですね

[kimukimu009]

今、気が付きました。本当に、ありがとうございました。