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>
ありがとうRana!できます。 – Kitty
@Kittyそれがあなたと他の人のために役立った場合、その答えをUPしてください。 :) –