php - 同一の選択名の区別

Question

'f1' と 'f2' の 'select name' を区別するにはどうすればよいですか? 現在両方とも 'subcat' という名前が付いていますが、subcat 変数は 1 つしかありません。このコードは、cat 値 = 2 の場合にのみ正確に機能し、cat 値 = 1 の場合、subcat 値は常に =0 です。

<?php    
$cat=$_POST['cat'];
$subcat = $_POST['subcat'];
?>
<form action='submitsite.php' method='POST'>
    <table>
        <tr>
            <td>category(optional)</td>
            <td>
                <select name='cat' id = "opts" onchange = "showForm()">
                    <option value = "0">Select</option>
                    <option value = "1">music </option>
                    <option value = "2">film </option>
                </select> 
                <div id = "f1" style="display:none">
                    <select name='subcat' id = "opts" onchange = "showForm()">
                        <option value = "0">Select</option>
                        <option value = "3">pop</option>
                        <option value = "4">rock </option>
                    </select>
                </div>
                <div id = "f2" style="display:none">
                    <select name='subcat' id = "opts" onchange = "showForm()">
                        <option value = "0">Select</option>
                        <option value = "5">comedy</option>
                        <option value = "6">drama</option>
                    </select>
                </div>
    </form>
</div>

<script type = "text/javascript">
    function showForm(){
        var selopt = document.getElementById("opts").value;

        if (selopt == 1) {
            document.getElementById("f1").style.display="block";
            document.getElementById("f2").style.display="none";
        }
        if (selopt == 2) {
            document.getElementById("f2").style.display="block";
            document.getElementById("f1").style.display="none";
        } 
    }
</script>

score 3 · Accepted Answer

名前に追加[]します。選択は、送信時に配列として解釈されます。

<select name="subcat[]">...</select>

POSTPHP を使用すると、( ed の場合) 次のようにアクセスできます。

<?php

    $subCatArr = $_POST['subcat'];

    $firstIndex = $subCatArr[0];
    $secondIndex = $subCatArr[1];

そうそう、HTML で ID を再利用することは有効ではありません。それらは一意である必要があります。

UPDATE OPの意図をよりよく理解した後：

このスパゲッティコード (愛称、OP) の意図を理解した場合、ユーザーは、選択したカテゴリに基づいて、1 つのカテゴリと 1 つのサブカテゴリを選択できます。次に、ユーザーがフォームを送信すると、その選択がデータベースに記録されます。

まず、table不要な要素を使用しないようにしましょう。select次に、サブカテゴリ用に1 つだけ必要です。

<form action='submitsite.php' method='POST'>
    <label>category(optional)</label>
    <select name='cat' id = "opts" onchange = "showForm()">
        <option value = "0">Select</option>
        <option value = "1">music </option>
        <option value = "2">film </option>
    </select> 
    <div id="subcatDiv" style="display:none;">
        <select name='subcat' id='opts'></select>
    </div>
    .
    .
    .
    <input type='submit' />
</form>

とにかく表示されていないので、空白のままにしておくことができます。

ここで、ユーザーが変更を加えると、適切なサブカテゴリを表示するか、単に非表示にdivします。

<script type = "text/javascript">
    function showForm(){
        var selopt = document.getElementById("opts");
        var seloptVal = selOpt.value;
        var subcatDiv = document.getElementById("subcatDiv");

        var options = "";
        switch(seloptVal * 1) {
            case 1:
                options = "<option value='0'>Select</option>" + 
                    "<option value='3'>pop</option>" + 
                    "<option value='4'>rock</option>";
                break;
            case 2:
                options = "<option value='0'>Select</option>" + 
                    "<option value='5'>comedy</option>" + 
                    "<option value='6'>drama</option>";
                break;
            default:
                break;
        }

        if (options == "") {
            subcatDiv.style.display = "none";
            selopt.innerHTML = options;
        } else {
            selopt.innerHTML = options;
            subcatDiv.style.display = "block";
        }
    }
</script>

selectこれで、サブカテゴリの1 つだけを処理する必要があります。

score 2 · Accepted Answer

私はあなたのコードの多くを変更してそれを有効なhtmlにし、またあなたの質問がそれをあまり明確にしなかったのであなたがそれを望むと私が「考える」ように機能します。

これが私がしなければならなかった修正のリストです：

IDを変更して、その目的を明確にしました。
重複するIDを削除しました。
テーブルを適切に閉じました。
JavaScriptを完全に変更して、特定の選択を表示および非表示にしました
私が忘れてしまったことはもっとたくさんあります。

このjsfiddleをご覧ください。

修正されたhtml：

<form action='submitsite.php' method='POST'>
  <table>
    <tr>
      <td>category(optional)</td>
      <td>
         <select name="cat" id="selectType">
           <option value="0">Select</option>
           <option value="1">music</option>
           <option value="2">film</option>
         </select> 

         <div id="f1" style="display:none">
           <select name='music' id="selectMusic">
             <option value="0">Select</option>
             <option value="3">pop</option>
             <option value="4">rock</option>
           </select>
         </div>

         <div id="f2" style="display:none">
           <select name="type" id="selectFilm">
             <option value="0">Select</option>
             <option value="5">comedy</option>
             <option value="6">drama</option>
           </select>
         </div>
       </td>
     </tr>
   </table>      
 </form>

修正されたJavaScript：

$("#selectType").change(function() {

  var selected = $(this).val();
  $("#f1, #f2").hide();

  switch (selected) {
    case "1":
      $("#f1").show();
      break;

    case "2":
      $("#f2").show();
      break;           
  }            
});

score 0 · Accepted Answer

document.forms[0].subcat配列になります。

document.forms[0].subcat[0]最初のインスタンスなどになります。

ps ID は一意である必要があります。

score 0 · Accepted Answer

document.getElementById('f2').getElementsByTagName('select')[0]

ところで、ID を再利用することは HTML 標準に違反しています。

php - 同一の選択名の区別

4 に答える 4

Related

Reference