Problem:
I have created a webform in Business Catalyst which I have customized so that I have multiple instances of it on a static page.
First I created several divs that will contain parts of the form:
<form name="catwebformform23079" method="post" onsubmit="return checkWholeForm23079(this)" enctype="multipart/form-data" action="/FormProcessv2.aspx?WebFormID=446040&OID={module_oid}&OTYPE={module_otype}&EID={module_eid}&CID={module_cid}"> <span class="req">*</span> Required
{module_ccsecurity}
<div class="web1"><label for="CAT_Custom_1433316">ARRIVAL <span class="req">*</span>
</label>
<br />
<input type="text" name="CAT_Custom_1433316" id="dpd1" class="cat_textbox" readonly="readonly" onfocus="displayDatePicker('CAT_Custom_1433316');return false;" />
<label for="CAT_Custom_1433317">DEPARTURE <span class="req">*</span>
</label>
<br />
<input type="text" name="CAT_Custom_1433317" id="dpd2" class="cat_textbox" readonly="readonly" onfocus="displayDatePicker('CAT_Custom_1433317');return false;" />
<label for="CAT_Custom_1433318">Bedrooms: <span class="req">*</span>
</label>
<br />
<select name="CAT_Custom_1433318" id="CAT_Custom_1433318" style="width:100%;" style="width:100%;" class="pretty-select">
<option value=""></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<label for="CAT_Custom_1433319">Adults <span class="req">*</span>
</label>
<br />
<select name="CAT_Custom_1433319" id="CAT_Custom_1433319" style="width:100%;" class="pretty-select">
<option value=""></option>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select></div>
<div class="web2"> <label for="CAT_Custom_1433320">Children <span class="req">*</span>
</label>
<br />
<select name="CAT_Custom_1433320" id="CAT_Custom_1433320" style="width:100%;" class="pretty-select">
<option value=""></option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
<label for="CAT_Custom_1433321">Pets <span class="req">*</span>
</label>
<br />
<select name="CAT_Custom_1433321" id="CAT_Custom_1433321" style="width:100%;" class="pretty-select">
<option value=""></option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
<label for="CAT_Custom_1433324">Parking <span class="req">*</span>
</label>
<br />
<select name="CAT_Custom_1433324" id="CAT_Custom_1433324" style="width:100%;" class="pretty-select">
<option value=""></option>
<option value="Yes">Yes</option>
<option selected="selected" value="No">No</option>
</select>
</div>
<div class="web3"><label for="CAT_Custom_1433322">Name <span class="req">*</span>
</label>
<br />
<input type="text" maxlength="4000" name="CAT_Custom_1433322" id="CAT_Custom_1433322" class="cat_textbox" />
<label for="CAT_Custom_1433323">Surname <span class="req">*</span>
</label>
<br />
<input type="text" maxlength="4000" name="CAT_Custom_1433323" id="CAT_Custom_1433323" class="cat_textbox" />
<label for="WorkPhone">Work Phone Number <span class="req">*</span>
</label>
<br />
<input type="text" name="WorkPhone" id="WorkPhone" class="cat_textbox" maxlength="255" />
<label for="EmailAddress">Email Address <span class="req">*</span>
</label>
<br />
<input type="text" name="EmailAddress" id="EmailAddress" class="cat_textbox" maxlength="255" />
<input class="cat_button" type="submit" value="Submit" id="catwebformbutton" />
</div>
<script type="text/javascript" src="/CatalystScripts/ValidationFunctions.js?vs=b1677.r461496-phase1"></script>
<script type="text/javascript" src="/CatalystScripts/Java_DatePicker.js?vs=b1677.r461496-phase1"></script>
<script type="text/javascript">
//<![CDATA[
var submitcount23079 = 0;
function checkWholeForm23079(theForm) {
var why = "";
if (theForm.WorkPhone) why += isEmpty(theForm.WorkPhone.value, "Work Phone Number");
if (theForm.EmailAddress) why += checkEmail(theForm.EmailAddress.value);
if (theForm.CAT_Custom_1433316) why += checkDate(theForm.CAT_Custom_1433316.value, "ARRIVAL");
if (theForm.CAT_Custom_1433317) why += checkDate(theForm.CAT_Custom_1433317.value, "DEPARTURE");
if (theForm.CAT_Custom_1433318) why += checkDropdown(theForm.CAT_Custom_1433318.value, "Bedrooms:");
if (theForm.CAT_Custom_1433319) why += checkDropdown(theForm.CAT_Custom_1433319.value, "Adults");
if (theForm.CAT_Custom_1433320) why += checkDropdown(theForm.CAT_Custom_1433320.value, "Children");
if (theForm.CAT_Custom_1433321) why += checkDropdown(theForm.CAT_Custom_1433321.value, "Pets");
if (theForm.CAT_Custom_1433324) why += checkDropdown(theForm.CAT_Custom_1433324.value, "Parking");
if (theForm.CAT_Custom_1433322) why += isEmpty(theForm.CAT_Custom_1433322.value, "Name");
if (theForm.CAT_Custom_1433323) why += isEmpty(theForm.CAT_Custom_1433323.value, "Surname");
if (why != "") {
alert(why);
return false;
}
if (submitcount23079 == 0) {
submitcount23079++;
theForm.submit();
return false;
} else {orm.CAT_Custom_1433321) why
alert("Form submission is in progress.");
return false;
}
}
//]]>
</script>
As you can see the website is broken down into 3 parts: .web1 .web2 .web3
I also have buttons #hide1 #hide2 that hide and replace .web1 and .web2
// JavaScript Document
$('#hide').click(function(){
if($.trim($('.web1 :input').val()) == ''){
$.each().alert('PLEASE FILL IS ALL FIELDS.');
}
else {
$(".web1").hide();
$(".web2").show();
$("#hide").hide();
$("#hide2").show();
}
}
);
// JavaScript Document
$('#hide2').click(function(){
if($.trim($('.web2 :input').val()) == ''){
$.each().alert('PLEASE FILL IS ALL FIELDS.');
}
else {
$(".web2").hide();
$(".web3").show();
$("#hide2").hide();
}
}
);
$('.web2').hide();
$('.web3').hide();
$('#hide2').hide();
As you can tell with the code when you click the buttons they are suppose to validate the input values within the div before they proceed to the next div.
I tried this but it seems not validate all of the form inputs. Any help on how I can solve this problem?
