У меня есть код ниже, поэтому, когда посетитель выбирает «внутренний», для внутреннего появляется скрытый раскрывающийся список. Если посетитель выбирает «студент», вместо него появляется другой скрытый раскрывающийся список. Чтобы увидеть, как это работает, вы можете проверить это здесь. Я также использую валидатор 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
там... посмотри 2-ю часть того, что я написал... ;) - person benomatis   schedule 22.04.2014