2

学校用のデータ入力フォームを作成しています。学校は、5 年生から 12 年生までの生徒のデータをこのデータベースに入力します。現在、5 年生には 4 つのセクションがあり、他のすべての学年には 3 つのセクションがあります。10 年生のセクションは 1 つだけです。

フォームの準備ができており、jquery を使用して、ユーザーが選択したグレードに応じてセクション選択要素を表示または非表示にすることができます。私の問題は、ユーザーがセクション選択要素が表示され、ユーザーが「A」と言って送信する5番目としてstdを選択したときです。しかし、私が得る値は0です。ユーザーがセクションを「D」として選択した場合、送信される値は「B」です。

他のすべてのグレードのセクション選択は正常に機能しています。この問題は、選択したグレードが 5 番目の場合にのみ発生します。

脚本

<script type='text/javascript' src='scripts/jquery-1.5.2.js'></script>
<script type="text/javascript">//<![CDATA[ 
$(window).load(function(){
$("#std").change(function() {
        var value = $(this).val();
        if(parseInt(value)==0) {
           $("#sec5").hide();
           $("#sec6").hide();
        }
        if(parseInt(value)==5) {
            $("#sec5").show();
            $("#sec6").hide();
        }
        if(parseInt(value)==6) {
           $("#sec5").hide();
           $("#sec6").show();
        }
        if(parseInt(value)==7) {
           $("#sec5").hide();
           $("#sec6").show();
        } 
    if(parseInt(value)==6) {
       $("#sec5").hide();
       $("#sec6").show();
    }
    if(parseInt(value)==8) {
       $("#sec5").hide();
       $("#sec6").show();
    }
    if(parseInt(value)==9) {
       $("#sec5").hide();
       $("#sec6").show();
    }
    if(parseInt(value)==10) {
       $("#sec5").hide();
       $("#sec6").hide();
    }
    if(parseInt(value)==11) {
       $("#sec5").hide();
       $("#sec6").show();
    }
    if(parseInt(value)==12) {
       $("#sec5").hide();
       $("#sec6").show();
    }
});

});//]]> 
</script>

HTML 部分

<form action="check.php" method="post">
    <fieldset>
      <legend>DBMS</legend>
      <label for="roll">Roll:
        <input name="roll" type="text" id="roll" value="" size="8" maxlength="10" />
      </label>
      &nbsp;
      <label for="marks">Total Marks:
        <input name="marks" type="text" id="marks" value="" size="3" maxlength="3" />
      </label>
      &nbsp;
      <label for="std">Std</label>
      <select id="std" name="std">
        <option value="0">--Select--</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
        <option value="9">9</option>
        <option value="10">10</option>
        <option value="11">11</option>
        <option value="12">12</option>
      </select>
      <span id="sec5" class="hide">
      &nbsp;
      <label for="sec">Section</label>
      <select id="sec" name="sec">
        <option value="0">--Select--</option>
        <option value="A">Sec A</option>
        <option value="B">Sec B</option>
        <option value="C">Sec C</option>
        <option value="D">Sec D</option>
      </select>
      </span> <span id="sec6" class="hide">
      &nbsp;
      <label for="sec">Section</label>
      <select id="sec" name="sec">
        <option value="0">--Select--</option>
        <option value="A">Sec A</option>
        <option value="B">Sec B</option>
        <option value="C">Sec C</option>
      </select>
      </span>
      <p align="center">
        <input type="submit" name="nlogin" id="nlogin" value="Submit" />
        &nbsp;
        <input type="reset" name="nreset" id="nreset" value="Reset" />
      </p>
    </fieldset>
  </form>
4

3 に答える 3

6

あなたshow()またはhide()フォームの 1 つの領域は、削除されません。見えないように隠されているだけです。したがって、フォームは実際には の名前 (および ID - 大きなノーノー) の 2 つの選択ドロップダウンを送信していますsec。あなたの問題は、2番目の選択の値が最初の値を上書きすることが原因です。

ドロップダウンの 1 つを ing することでこれを解決することは可能remove()ですが、元に戻すことはできないため、お勧めしません。

代わりに、それらの選択ドロップダウンの少なくとも 1 つの名前/ID を変更し、サーバー側のコードを追加して、どれを処理する必要があるかを確認することができますsec1。sec2

2 番目の解決策は、HTML で 1 つの選択だけを行い、jQuery を使用してそのオプションを変更することです。これには、ほとんどの JavaScript コードを書き直す必要がありますが、サーバー側のコーディングは不要になります。(ただし、サーバー側の検証は、冗長性として、これらの場合には常に良い考えであり、とにかく実装する必要があります。) 次のようなもの:

<select id="sec" name="sec">
    <option value="0">--Select--</option>
    <option id="sec-a" value="A">Sec A</option>
    <option id="sec-b" value="B">Sec B</option>
    <option id="sec-c" value="C">Sec C</option>
    <option id="sec-d" value="D">Sec D</option>
  </select>

JS:

$("#std").change(function() {
    var v = parseInt($(this).val(), 10); // always use a radix
    if(v==0) {
        $('#sec').hide();
    } else if(v==5) {
        $('#sec').show();
        $('#sec-d').hide();
    } else if(v==6) {
        $('#sec').show();
        $('#sec-d').show();
    }  // etc.
于 2012-08-14T13:29:29.710 に答える
1

コードの縮小版は次のとおりです。

$("#std").change(function() {
      var value = parseInt(this.value, 10);
      $("#sec5").hide();
      if (value == 0 || value == 10) {
           $("#sec6").hide();
      } else {
           $("#sec6").show();
      }
})

表示されているselect要素の属性を変更し、nameフォーム送信時に非表示の要素を削除できます。

$('form').submit(function(){
   $('select').filter(':hidden').remove();
   $('select:eq(1)').attr('name', 'theChosenOne') // if the second select is visible
})
于 2012-08-14T13:36:11.217 に答える
0

  1. 使用事例

    switch（value）{
    ケース6：
    ケース7：
    ケース8：
    ケース9：$（ "＃sec5"）。hide（）; $（ "＃sec6"）。show（）; 壊す;
    }

  2. 場合は2倍

    if（parseInt（value）== 6）{

于 2012-08-14T13:33:42.873 に答える