Имам кода по-долу, така че когато посетителят избере „домашно“, се появява скрита падаща селекция за местно. Ако посетителят избере „студент“, тогава вместо това се появява друга скрита селекция от падащо меню. За да видите как работи, можете да разгледате тук Аз също използвам jquery валидатор, така че ако има не е избрано поле или падащо меню, тогава се появява изскачащ прозорец. Но тъй като може да бъде избрано само едно от скритите полета (или тези, свързани с ученик или домашни), този валидатор винаги дава изскачащ прозорец. Какво мога да направя, така че изскачащият прозорец да работи, ако нито един от изборите на тези скрити падащи менюта не е избран.
Валидаторът на jquery, който използвам, е както следва:
<script>
function formCheck(formobj){
var x=document.forms["form1"]["email"].value;
var atpos=x.indexOf("@");
var dotpos=x.lastIndexOf(".");
var fieldRequired = Array("reason1", "reason2");
// Enter field description to appear in the dialog box
var fieldDescription = Array("Reason 1", "Reason 2");
// dialog message
var alertMsg = "Please complete all fields and enter a valid email address";
var l_Msg = alertMsg.length;
for (var i = 0; i < fieldRequired.length; i++){
var obj = formobj.elements[fieldRequired[i]];
if (obj){
switch(obj.type){
case "select-one":
if (obj.selectedIndex == -1 || obj.options[obj.selectedIndex].value == ""){
alertMsg += " " + "\n";
}
break;
case "select-multiple":
if (obj.selectedIndex == -1){
alertMsg += " " + "\n";
}
break;
case "text":
case "textarea":
if (obj.value == "" || obj.value == null || atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length){
alertMsg += " " + "\n";
}
break;
default:
}
if (obj.type == undefined){
var blnchecked = false;
for (var j = 0; j < obj.length; j++){
if (obj[j].checked){
blnchecked = true;
}
}
if (!blnchecked){
alertMsg += " " + "\n";
}
}
}
}
if (alertMsg.length == l_Msg){
return true;
}else{
alert(alertMsg);
return false;
}
}
// -->
</script>
Също така кодът за html частта е както следва:
<script type="text/javascript">
/* <![CDATA[ */
$(document).ready(function(){
$("#storagetype").change(function(){
if ($(this).val() == "student" ) {
$("#hidestudent").slideDown("fast"); //Slide Down Effect
} else {
$("#hidestudent").slideUp("fast"); //Slide Up Effect
}
});
$("#storagetype").change(function(){
if ($(this).val() == "domestic" ) {
$("#hidedomestic").slideDown("fast"); //Slide Down Effect
} else {
$("#hidedomestic").slideUp("fast"); //Slide Up Effect
}
});
});
/* ]]> */
</script>
<div class="contactform">
<div class="forminside">
<div id="apDiv1">
<form id="form1" name="form1" method="get" form action="page2.php" onsubmit="return formCheck(this); ">
<div class="detailscolumn1"><h3></h3>
<br/>
<br/>
<div class="storagetype">
<div class="input select">
<div class="labelfortype">
<label for="storagetype"> select your business type</label> </div><!--end of labelfortype class-->
<select name="storagetype" id="storagetype">
<option value="">(select)</option>
<option value="domestic">domestic</option>
<option value="student">student</option>
</select>
</div>
</div><!--end of storagetype class-->
<div class="hiddenreason">
<div class="hide" id="hidedomestic"><!-- this select box will be hidden at first -->
<div class="input select">
<div class="labelforreason"> <label for="reasonstorage">reason for business</label></div><!--end of labelfortype class-->
<select name="reason2" id="reason1">
<option value="">(select)</option>
<option value="moving">moving</option>
<option value="diy/home improvements">diy/home improvements</option>
<option value="decluttering">decluttering</option>
<option value="other">other</option>
</select>
</div>
</div>
</div><!--end of hidden reason-->
<div class="hiddenreason">
<div class="hide" id="hidestudent"><!-- this select box will be hidden at first -->
<div class="input select">
<div class="labelforreason"> <label for="reasonstorage">reason for business</label></div><!--end of labelfortype class-->
<select name="reason3" id="reason2">
<option value="">(select)</option>
<option value="holiday">holiday</option>
<option value="moving">moving</option>
<option value="other">other</option>
</select>
</div>
</div>
</div><!--end of hidden reason-->
</div><!--end of detailscolumn1-->
</form></div>
</div><!--end of forminside-->
</div><!--end of contactform-->
Много благодаря предварително
0
като стойност, ако не е избрано, по-лесно е да го проверите, след това се уверете, че сте деактивирали елементаselect
, който е скрит, накрая проверете за стойностите само ако не са деактивирани... - person benomatis   schedule 22.04.20140
там... виж втората част от написаното от мен... ;) - person benomatis   schedule 22.04.2014