2017-01-20 14 views
0

JavaScript(またはJquery)でデフォルトで非表示にする必要があるdivを表示しようとしています。
divを表示する条件は、2つのドロップダウンフィールドの選択されたオプションに基づいています。以下のコードで

性別女性(ワンドロップダウンから選択)とクラス未満ある場合(他のドロップダウンから選択)のみ<div id="hidden_div">は他の賢明にそれを示すべき隠されるべきです。
jqueryまたはjavascriptのヘルプはうまくいきます。あなたは、もはや渡す必要が複数のドロップダウン選択値に基づいてjavascriptまたはjqueryで非表示divを表示する

function showDiv(){ 
    var select = document.querySelector("select[name='gender']"); 
    var qselect = document.querySelector("select[name='qualifications']"); 
    if(select.value == 'Female' && (qselect.value=='LKG'||qselect.value=='UKG'||qselect.value=='1st'||qselect.value=='2nd'||qselect.value=='3rd')){ 
     document.getElementById('hidden_div').style.display = "block"; 
    } else{ 
     document.getElementById('hidden_div').style.display = "none"; 
    } 
} 

注意(:

<form class="form" method="post" action="doitnow.php" id="form1"> 
    <label class="col-md-4 control-label">Name of the Student:</label> 
    <p class="name"> 
     <input name="Full_Name" type="text" class="validate[required,custom[onlyLetter],length[0,100]] feedback-input" placeholder="Name" id="name" required /> 
    </p> 
    <label>Gender:</label> 
    <p class="email"> 
     <select name="gender" type="text" onchange="showDiv(this)" class="validate[required,custom[email]] feedback-input" id="name" placeholder="Select your Gender" required> 
      <option value="">Select the Gender</option> 
      <option value="Male">Male</option> 
      <option value="Female">Female</option> 
     </select> 
    </p> 
    <label>Mother's Name</label> 
    <p class="email"> 
     <input name="Mother_Name" type="text" class="validate[required,custom[phone]] feedback-input" id="name" placeholder="Mother's Name" required /> 
    </p> 

    <p class="email"> 
     <input name="source" type="text" value="enquiry_form" id="phone" hidden /> 
    </p> 
    <label>Father's Name</label> 
    <p class="name"> 
     <input name="Father_Name" type="text" class="validate[required,custom[phone]] feedback-input" id="name" placeholder="Father's Name" required /> 
    </p> 
    <label>Class for which admission sought for:</label> 
    <p class="email"> 
     <select name="qualification" type="text" onchange="showDiv(this)" class="validate[required,custom[email]] feedback-input" id="name" required> 
      <option value="">Select the Class</option> 
      <option value="LKG">LKG</option> 
      <option value="UKG">UKG</option> 
      <option value="1st">1st</option> 
      <option value="2nd">2nd</option> 
      <option value="3rd">3rd</option> 
      <option value="4th">4th</option> 
      <option value="5th">5th</option> 
      <option value="6th">6th</option> 
      <option value="7th">7th</option> 
      <option value="8th">8th</option> 
      <option value="9th">9th</option> 
      <option value="10th">10th</option> 
      <option value="11th">11th</option> 
      <option value="12th">12th</option> 
     </select> 
    </p> 
    <script type="text/javascript"> 
     function showDiv(select) { 
      if (select.value == 'Female' && (select.value == 'LKG' || select.value == 'UKG' || select.value == '1st' || select.value == '2nd' || select.value == '3rd')) { 
       document.getElementById('hidden_div').style.display = "block"; 
      } else { 
       document.getElementById('hidden_div').style.display = "none"; 
      } 
     } 
    </script> 
    <div id="hidden_div" style="display:none;"> 
     <label>(ONLY FOR GIRL CHILD FOR CLASSES LKG TO III)<br>Select which section admission is required in:</label> 
     <p class="email"> 
      <select name="category" type="text" class="validate[required,custom[email]] feedback-input" id="name"> 
       <option value="" selected>Select the Section</option> 
       <option value="Girls_Section">Girls Section</option> 
       <option value="Boys_Section">Boys Section</option> 
      </select> 
     </p> 
    </div> 
    <label>Previous school attended:</label> 
    <p class="email"> 
     <input name="prev_school" type="text" class="validate[required,custom[phone]] feedback-input" id="comment" placeholder="Last School Name" required /> 
    </p> 
    <label>Mobile No. (Only 10 digits allowed, format: xxxxxxxxxx):</label> 
    <p class="phone"> 
     <input name="Telephone_Number" type="text" pattern="^\d{3}\d{3}\d{4}$" class="validate[required,custom[phone]] feedback-input" id="Phone" placeholder="Mobile No" required /> 
    </p> 
    <label>Email Address:</label> 
    <p class="email"> 
     <input name="Email_Address" type="text" class="validate[required,custom[phone]] feedback-input" id="email" placeholder="Email Address" /> <!--pattern="^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$"--> 
    </p> 
    <?php 
     $password = mt_rand(1000, 9999) . "a"; 
     echo '<input name="pass" type="text" value='.$password.' hidden />'; 
    ?> 

<div class="submit"> 
    <input type="submit" value="SUBMIT fORM" name="submit" id="button-blue" /> 
    <div class="ease"></div> 
</div> 
</form> 

答えて

2

あなたはこのコードを試してみて、あなたはそれをリンクローカルホストに::

<form class="form" method="post" action="doitnow.php" id="form1"> 
    <label class="col-md-4 control-label">Name of the Student:</label> 
    <p class="name"> 
     <input name="Full_Name" type="text" class="validate[required,custom[onlyLetter],length[0,100]] feedback-input" placeholder="Name" id="name" required/> 
    </p> 
    <label>Gender:</label> 
    <p class="email"> 
     <select name="gender" type="text" onchange="showDiv(this)" class="validate[required,custom[email]] feedback-input changer" id="name" placeholder="Select your Gender" required> 
      <option value="">Select the Gender</option> 
      <option value="Male">Male</option> 
      <option value="Female">Female</option> 
     </select> 
    </p> 
    <label>Mother's Name</label> 
    <p class="email"> 
     <input name="Mother_Name" type="text" class="validate[required,custom[phone]] feedback-input" id="name" placeholder="Mother's Name" required/> 
    </p> 

    <p class="email"> 
     <input name="source" type="text" value="enquiry_form" id="phone" hidden /> 
    </p> 
    <label>Father's Name</label> 
    <p class="name"> 
     <input name="Father_Name" type="text" class="validate[required,custom[phone]] feedback-input" id="name" placeholder="Father's Name" required/> 
    </p> 
    <label>Class for which admission sought for:</label> 
    <p class="email"> 
     <select name="qualification" type="text" onchange="showDiv(this)" class="validate[required,custom[email]] feedback-input changer" id="name" required> 
      <option value="" >Select the Class</option> 
      <option value="LKG">LKG</option> 
      <option value="UKG">UKG</option> 
      <option value="1st">1st</option> 
      <option value="2nd">2nd</option> 
      <option value="3rd">3rd</option> 
      <option value="4th">4th</option> 
      <option value="5th">5th</option> 
      <option value="6th">6th</option> 
      <option value="7th">7th</option> 
      <option value="8th">8th</option> 
      <option value="9th">9th</option> 
      <option value="10th">10th</option> 
      <option value="11th">11th</option> 
      <option value="12th">12th</option> 
     </select> 
    </p> 
    <div id="hidden_div" style="display:none;"> 
     <label>(ONLY FOR GIRL CHILD FOR CLASSES LKG TO III)<br>Select which section admission is required in:</label> 
     <p class="email"> 
      <select name="category" type="text" class="validate[required,custom[email]] feedback-input" id="name"> 
       <option value="" selected>Select the Section</option> 
       <option value="Girls_Section">Girls Section</option> 
       <option value="Boys_Section">Boys Section</option> 
      </select> 
     </p> 
    </div> 
    <label>Previous school attended:</label> 
    <p class="email"> 
     <input name="prev_school" type="text" class="validate[required,custom[phone]] feedback-input" id="comment" placeholder="Last School Name" required/> 
    </p> 
    <label>Mobile No. (Only 10 digits allowed, format: xxxxxxxxxx):</label> 
    <p class="phone"> 
     <input name="Telephone_Number" type="text" pattern="^\d{3}\d{3}\d{4}$" class="validate[required,custom[phone]] feedback-input" id="Phone" placeholder="Mobile No" required/> 
    </p> 
    <label>Email Address:</label> 
    <p class="email"> 
     <input name="Email_Address" type="text" class="validate[required,custom[phone]] feedback-input" id="email" placeholder="Email Address"/> <!--pattern="^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$"--> 
    </p> 
    <?php 
    $password = mt_rand(1000, 9999) . "a"; 
    echo '<input name="pass" type="text" value=' . $password . ' hidden />'; 

    ?> 

    <div class="submit"> 
     <input type="submit" value="SUBMIT fORM" name="submit" id="button-blue"/> 
     <div class="ease"></div> 
    </div> 
</form> 
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js"></script> 
<script type="text/javascript"> 
      (function ($) { 
       $(document).ready(function() { 
        $(document).on('change', '.changer', function() { 
         var class_value = $('select[name="qualification"]').val(); 
         var gender_value = $('select[name="gender"]').val(); 
         if (gender_value == 'Female' && (class_value == 'LKG' || class_value == 'UKG' || class_value == '1st' || class_value == '2nd' || class_value == '3rd')) 
         { 
          $('#hidden_div').show(); 
         } else { 
          $('#hidden_div').hide(); 
         } 
        }); 
       }); 
      })(jQuery); 
</script> 
をjQueryライブラリを置くことができます
+0

ありがとうRana!できます。 – Kitty

+1

@Kittyそれがあなたと他の人のために役立った場合、その答えをUPしてください。 :) –

0

あなたはとてもこれを行うJavaScriptの関数内の両方の選択を確認する必要があります:
は、私が働いていない以下のコードを試してみましたこの関数に、これは)

関連する問題