CAE5942
asked on
Multi Step Form using jQuery
Hi everyone,
I wanted to use the code at the following url to create a multi step form:
http://thecodeplayer.com/w
I have validation on my form but the code doesn't validate before it progresses to the next field set. I wondered if anyone could let me know of an alternative to this so that it validates and also so that it works in earlier versions of Internet Explorer.
Would appreciate any advice.
Thanks
I wanted to use the code at the following url to create a multi step form:
http://thecodeplayer.com/w
I have validation on my form but the code doesn't validate before it progresses to the next field set. I wondered if anyone could let me know of an alternative to this so that it validates and also so that it works in earlier versions of Internet Explorer.
Would appreciate any advice.
Thanks
leakim971
we need to see your form
ASKER
Ok no problem,
The code for the form is blow. Can you help further?
Thanks
The code for the form is blow. Can you help further?
Thanks
<div class="columns large-8 clearfix" style="background-color: #e4dab8;">
<div style="clear: both;"></div>
<div class="signup form">
<h4 style="text-align: center; color: white;">Application Form</h4>
<form id="msform" name="catwebformform54637" method="post" onsubmit="return checkWholeForm54637(this)" enctype="multipart/form-data" action="/FormProcessv2.aspx?WebFormID=70776&OID={module_oid}&OTYPE={module_otype}&EID={module_eid}&CID={module_cid}">
<p style="text-align: left;"> <span class="req">*</span> Required</p>
<!-- progressbar -->
<ul id="progressbar">
<li class="active">Account Setup </li>
<li> Personal Details </li>
<li> Home Address </li>
<li> Work Address </li>
<li> PO Box Address </li>
<li> DX Address </li>
<li> Billing Address </li>
<li> Payment Details </li>
</ul>
<fieldset class="sec first">
<legend class="fs-title">Account Setup</legend>
<label for="EmailAddress">Email Address <span class="req">*</span></label>
<input type="text" name="EmailAddress" id="EmailAddress" class="cat_textbox" placeholder="Email" maxlength="255" /> </td>
</label>
<label for="Password">Password <span class="req">*</span></label>
<input type="password" name="Password" id="Password" class="cat_textbox" maxlength="255" autocomplete="off" /></label>
<label for="PasswordConfirm">Confirm Password <span class="req">*</span></label>
<input type="password" name="PasswordConfirm" id="PasswordConfirm" class="cat_textbox" maxlength="255" autocomplete="off" />
</label><br />
<input type="button" name="next" class="next action-button" value="Next" />
</fieldset>
<fieldset class="sec">
<legend class="fs-title">Personal Details</legend>
<label for="Title">Title
<select name="Title" id="Title" class="cat_dropdown_smaller">
<option value="913142">Dr</option>
<option value="913141">Miss</option>
<option value="913138" selected="selected">Mr</option>
<option value="913139">Mrs</option>
<option value="913140">Ms</option>
</select>
</label>
<label for="FirstName">First Name <span class="req">*</span>
<input type="text" name="FirstName" id="FirstName" class="cat_textbox" maxlength="255" /> </label>
<label for="CAT_Custom_329121_128444">Middle Name
<input type="text" maxlength="4000" name="CAT_Custom_329121_128444" id="CAT_Custom_329121_128444" class="cat_textbox" /></label>
<label for="LastName">Last Name <span class="req">*</span>
<input type="text" name="LastName" id="LastName" class="cat_textbox" maxlength="255" /> </label>
<label for="CAT_Custom_329249_128500">Profession
<input type="text" maxlength="4000" name="CAT_Custom_329249_128500" id="CAT_Custom_329249_128500" class="cat_textbox" /></label
><br />
<input type="button" name="previous" class="previous action-button" value="Previous" />
<input type="button" name="next" class="next action-button" value="Next" />
</fieldset>
<fieldset class="sec">
<legend class="fs-title">Home Address </legend>
<label for="HomeAddress">Home Address
<input type="text" name="HomeAddress" id="HomeAddress" class="cat_textbox" maxlength="500" /></label>
<label for="CAT_Custom_329119_128443">Home Address2
<input type="text" maxlength="4000" name="CAT_Custom_329119_128443" id="CAT_Custom_329119_128443" class="cat_textbox" /></label>
<label for="HomeCity">City <span class="req">*</span>
<input type="text" name="HomeCity" id="HomeCity" class="cat_textbox" maxlength="255" /></label>
<label for="HomeState">State <span class="req">*</span>
<input type="text" name="HomeState" id="HomeState" class="cat_textbox" maxlength="255" /></label>
<label for="HomeZip">Zipcode/Postcode <span class="req">*</span>
<input type="text" name="HomeZip" id="HomeZip" class="cat_textbox" maxlength="255" /></label>
<label for="HomeCountry">Country <span class="req">*</span>
<select name="HomeCountry" id="HomeCountry" class="cat_dropdown">
<option value=" ">-- Select Country --</option>
<option value="AF">AFGHANISTAN</option>
<option value="AX">ALAND ISLANDS</option>
<option value="AL">ALBANIA</option>
<option value="DZ">ALGERIA</option>
</select></label>
<label for="HomePhone">Home Phone Number
<input type="text" name="HomePhone" id="HomePhone" class="cat_textbox" maxlength="255" /></label>
<br />
<input type="button" name="previous" class="previous action-button" value="Previous" />
<input type="button" name="next" class="next action-button" value="Next" />
</fieldset>
<fieldset class="sec">
<legend class="fs-title">Work Address <span class="req">*</span></legend>
<label for="Company">Company Name
<input type="text" name="Company" id="Company" class="cat_textbox" maxlength="255" /></label>
<label for="WorkPhone">Work Phone Number
<input type="text" name="WorkPhone" id="WorkPhone" class="cat_textbox" maxlength="255" />
</label>
<label for="CAT_Custom_329240_128496">Work Phone Number2
<input type="text" maxlength="4000" name="CAT_Custom_329240_128496" id="CAT_Custom_329240_128496" class="cat_textbox" />
</label>
<label for="CellPhone">Mobile Phone Number <span class="req">*</span>
<input type="text" name="CellPhone" id="CellPhone" class="cat_textbox" maxlength="255" />
</label>
<label for="WorkAddress">Work Address <span class="req">*</span>
<input type="text" name="WorkAddress" id="WorkAddress" class="cat_textbox" maxlength="500" />
</label>
<label for="CAT_Custom_329241_128497">Work Address2
<input type="text" maxlength="4000" name="CAT_Custom_329241_128497" id="CAT_Custom_329241_128497" class="cat_textbox" />
</label>
<label for="WorkCity">Suburb <span class="req">*</span>
<input type="text" name="WorkCity" id="WorkCity" class="cat_textbox" maxlength="255" />
</label>
<label for="WorkState">State <span class="req">*</span>
<input type="text" name="WorkState" id="WorkState" class="cat_textbox" maxlength="255" />
</label>
<label for="WorkZip">Zipcode/Postcode <span class="req">*</span>
<input type="text" name="WorkZip" id="WorkZip" class="cat_textbox" maxlength="255" />
</label>
<label for="WorkCountry">Country <span class="req">*</span>
<select name="WorkCountry" id="WorkCountry" class="cat_dropdown">
<option value=" ">-- Select Country --</option>
<option value="AF">AFGHANISTAN</option>
<option value="AX">ALAND ISLANDS</option>
<option value="AL">ALBANIA</option>
<option value="DZ">ALGERIA</option>
</select>
</label>
<br />
<input type="button" name="previous" class="previous action-button" value="Previous" />
<input type="button" name="next" class="next action-button" value="Next" />
</fieldset>
<fieldset class="sec">
<legend class="fs-title">PO Box Address</legend>
<label for="CAT_Custom_329242_128498">PO Box
<input type="text" maxlength="4000" name="CAT_Custom_329242_128498" id="CAT_Custom_329242_128498" class="cat_textbox" />
</label>
<label for="CAT_Custom_329243_128498">PO Box2
<input type="text" maxlength="4000" name="CAT_Custom_329243_128498" id="CAT_Custom_329243_128498" class="cat_textbox" />
</label>
<label for="CAT_Custom_329244_128498">PO Box Suburb
<input type="text" maxlength="4000" name="CAT_Custom_329244_128498" id="CAT_Custom_329244_128498" class="cat_textbox" />
</label>
<label for="CAT_Custom_329245_128498">PO Box State
<input type="text" maxlength="4000" name="CAT_Custom_329245_128498" id="CAT_Custom_329245_128498" class="cat_textbox" />
</label>
<label for="CAT_Custom_329246_128498">PO Box Postcode
<input type="text" maxlength="4000" name="CAT_Custom_329246_128498" id="CAT_Custom_329246_128498" class="cat_textbox" /></label>
<br />
<input type="button" name="previous" class="previous action-button" value="Previous" />
<input type="button" name="next" class="next action-button" value="Next" />
</fieldset>
<fieldset class="sec">
<legend class="fs-title">DX Address </legend>
<label for="CAT_Custom_329247_128499">DX Address1
<input type="text" maxlength="4000" name="CAT_Custom_329247_128499" id="CAT_Custom_329247_128499" class="cat_textbox" />
</label>
<label for="CAT_Custom_329248_128499">DX Address2
<input type="text" maxlength="4000" name="CAT_Custom_329248_128499" id="CAT_Custom_329248_128499" class="cat_textbox" />
</label>
<label for="CAT_Custom_329250_128501">Preferred Contact Method
<select name="CAT_Custom_329250_128501" id="CAT_Custom_329250_128501" class="cat_dropdown">
<option value=" ">-- Please select --</option>
<option value="Email">Email</option>
<option value="Home Address">Home Address</option>
<option value="Work Address">Work Address</option>
<option value="DX Address">DX Address</option>
</select>
</label>
<br />
<input type="button" name="previous" class="previous action-button" value="Previous" />
<input type="button" name="next" class="next action-button" value="Next" />
</fieldset>
<fieldset class="sec">
<legend class="fs-title">Billing Address </legend>
<label for="CAT_Custom_329122_128445">Membership Type <span class="req">*</span>
<select name="CAT_Custom_329122_128445" id="CAT_Custom_329122_128445" class="cat_dropdown">
<option value=" ">-- Please select --</option>
<option value="Full Membership">Full Membership</option>
<option value="Associate Membership">Associate Membership</option>
<option value="Student Membership">Student Membership</option>
</select></label>
<label for="BillingAddress">Billing Address <span class="req">*</span>
<input type="text" name="BillingAddress" id="BillingAddress" class="cat_textbox" maxlength="500" />
<label for="BillingCity">City <span class="req">*</span>
<input type="text" name="BillingCity" id="BillingCity" class="cat_textbox" maxlength="255" /></label>
<label for="BillingState">State <span class="req">*</span>
<input type="text" name="BillingState" id="BillingState" class="cat_textbox" maxlength="255" /></label>
<label for="BillingZip">Zipcode/Postcode <span class="req">*</span>
<input type="text" name="BillingZip" id="BillingZip" class="cat_textbox" maxlength="255" /></label>
<label for="BillingCountry">Country <span class="req">*</span>
<select name="BillingCountry" id="BillingCountry" class="cat_dropdown">
<option value=" ">-- Select Country --</option>
<option value="AF">AFGHANISTAN</option>
<option value="AX">ALAND ISLANDS</option>
<option value="AL">ALBANIA</option>
</select>
</label>
<br />
<input type="button" name="previous" class="previous action-button" value="Previous" />
<input type="button" name="next" class="next action-button" value="Next" />
</fieldset>
<fieldset class="sec">
<legend class="fs-title">Payment Details</legend>
<label>Payment Method <span class="req">*</span>
<label class="lradio nocc">
<input checked="checked" type="radio" name="PaymentMethodType" id="PaymentMethodType_5" value="5" class="PaymentMethodType nocc" onclick="ShowCCFields(this.value);"/> PayPal</label>
<label class="lradio nocc"><input type="radio" name="PaymentMethodType" id="PaymentMethodType_3" value="3" class="PaymentMethodType nocc" onclick="ShowCCFields(this.value);" />Pay Offline</label>
<div id="payOffline">
<p style="margin: 0px; padding: 0px;"> If you would like to pay offline download this form.
</div>
<label class="lradio usecc"> <input type="radio" class="PaymentMethodType usecc" onclick="ShowCCFields(this.value);" name="PaymentMethodType" id="PaymentMethodType_1" value="1" />Credit Card</label>
<div id="creditCardType" style="margin: 0px; padding: 0px;">
<label for="CardName">Name on Card <span class="req">*</span>
<input type="text" name="CardName" id="CardName" class="cat_textbox" autocomplete="off" /></label>
<label for="CardNumber">Card Number <span class="req">*</span>
<input type="text" name="CardNumber" id="CardNumber" class="cat_textbox" autocomplete="off" /></label>
<label>Card Expiry <span class="req">*</span>
<select name="CardExpiryMonth" id="CardExpiryMonth" class="cat_dropdown_smaller">
<option value="01" selected="selected">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select><select name="CardExpiryYear" id="CardExpiryYear" class="cat_dropdown_smaller">
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015" selected="selected">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
</select>
</label>
<label for="CardType">Card Type <span class="req">*</span>
<select name="CardType" id="CardType" class="cat_dropdown">
<option value="1">Visa</option>
<option value="2">Mastercard</option>
</select>
</label>
<label for="CardCCV">CCV Number <span class="req">*</span>
<input type="text" name="CardCCV" id="CardCCV" class="cat_textbox" autocomplete="off" />
</label> </div>
<label for="Amount">Amount <span class="req">*</span> <span id="constraint-300-label"></span>
<input type="text" name="Amount" id="Amount" class="cat_textbox"/>
</label> <br />
<input type="button" name="previous" class="previous action-button" value="Previous" />
<input type="submit" name="submit" class="submit action-button" value="Submit" />
</fieldset>
<script type="text/javascript" src="/CatalystScripts/ValidationFunctions.js"></script>
<script type="text/javascript">
//<![CDATA[
var submitcount54637 = 0;
function checkWholeForm54637(theForm) {
var why = "";
if (theForm.FirstName) why += isEmpty(theForm.FirstName.value, "First Name");
if (theForm.LastName) why += isEmpty(theForm.LastName.value, "Last Name");
if (theForm.EmailAddress) why += checkEmail(theForm.EmailAddress.value);
if (theForm.Password && theForm.PasswordConfirm) {
why += isEmpty(theForm.Password.value, "Password");
why += isEmpty(theForm.PasswordConfirm.value, "Confirm Password");
if (theForm.Password.value != theForm.PasswordConfirm.value) why += appendBreak("- Password and its confirmation do not match.");
if (theForm.Password.value.length < 6) why += appendBreak("- Password must be 6 characters or longer.");
}
if (theForm.HomeAddress) why += isEmpty(theForm.HomeAddress.value, "Home Address");
if (theForm.HomeCity) why += isEmpty(theForm.HomeCity.value, "Home City");
if (theForm.HomeState) why += isEmpty(theForm.HomeState.value, "Home State");
if (theForm.HomeZip) why += isEmpty(theForm.HomeZip.value, "Home Zipcode");
if (theForm.HomeCountry) why += checkDropdown(theForm.HomeCountry.value, "Home Country");
if (theForm.HomePhone) why += isEmpty(theForm.HomePhone.value, "Home Phone Number");
if (theForm.CellPhone) why += isEmpty(theForm.CellPhone.value, "Cell Phone Number");
if (theForm.WorkAddress) why += isEmpty(theForm.WorkAddress.value, "Work Address");
if (theForm.WorkCity) why += isEmpty(theForm.WorkCity.value, "Work City");
if (theForm.WorkState) why += isEmpty(theForm.WorkState.value, "Work State");
if (theForm.WorkZip) why += isEmpty(theForm.WorkZip.value, "Work Zipcode");
if (theForm.WorkCountry) why += checkDropdown(theForm.WorkCountry.value, "Work Country");
if (theForm.PaymentMethodType) why += checkSelected(theForm.PaymentMethodType, "Payment Method");
if (theForm.BillingAddress) why += isEmpty(theForm.BillingAddress.value, "Billing Address");
if (theForm.BillingCity) why += isEmpty(theForm.BillingCity.value, "Billing City");
if (theForm.BillingState) why += isEmpty(theForm.BillingState.value, "Billing State");
if (theForm.BillingZip) why += isEmpty(theForm.BillingZip.value, "");
if (theForm.BillingCountry) why += checkDropdown(theForm.BillingCountry.value, "Billing Country");
if (!theForm.PaymentMethodType || getRadioSelected(theForm.PaymentMethodType) == 1) {
if (theForm.CardName) why += isEmpty(theForm.CardName.value, "Name on Card");
if (theForm.CardNumber) why += isNumeric(theForm.CardNumber.value, "Card Number");
if (theForm.Amount) why += isCurrency(theForm.Amount.value, "Amount");
}
if (theForm.CAT_Custom_329122_128445) why += checkDropdown(theForm.CAT_Custom_329122_128445.value, "Membership Type");
if (why != "") {
alert(why);
return false;
}
if (submitcount54637 == 0) {
submitcount54637++;
theForm.submit();
return false;
} else {
alert("Form submission is in progress.");
return false;
}
}
//]]>
</script>
</fieldset>
</form>
<!-- jQuery -->
<script src="http://thecodeplayer.com/uploads/js/jquery-1.9.1.min.js" type="text/javascript"></script>
<!-- jQuery easing plugin -->
<script src="http://thecodeplayer.com/uploads/js/jquery.easing.min.js" type="text/javascript"></script>
<script src="/_assets/js/forms.js"></script>
</div>
</div>
</div>
</body>
</html>-->
update the complete callback like this (add two new lines) :
complete: function(){
current_fs.hide();
$(":text,:radio,:checkbox,textarea,select","fieldset:hidden").prop("disabled",true);
$(":text,:radio,:checkbox,textarea,select","fieldset:visible").prop("disabled",false);ASKER
Ok thanks. I'm a bit new to jQuery so will need a bit more guidance. The code below is what's used but can you tell me the location within the code below, where I should place your snippet?
Thanks
Thanks
//jQuery time
var current_fs, next_fs, previous_fs; //fieldsets
var left, opacity, scale; //fieldset properties which we will animate
var animating; //flag to prevent quick multi-click glitches
$(".next").click(function(){
if(animating) return false;
animating = true;
current_fs = $(this).parent();
next_fs = $(this).parent().next();
//activate next step on progressbar using the index of next_fs
$("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active");
//show the next fieldset
next_fs.show();
//hide the current fieldset with style
current_fs.animate({opacity: 0}, {
step: function(now, mx) {
//as the opacity of current_fs reduces to 0 - stored in "now"
//1. scale current_fs down to 80%
scale = 1 - (1 - now) * 0.2;
//2. bring next_fs from the right(50%)
left = (now * 50)+"%";
//3. increase opacity of next_fs to 1 as it moves in
opacity = 1 - now;
current_fs.css({'transform': 'scale('+scale+')'});
next_fs.css({'left': left, 'opacity': opacity});
},
duration: 800,
complete: function(){
current_fs.hide();
animating = false;
},
//this comes from the custom easing plugin
easing: 'easeInOutBack'
});
});
$(".previous").click(function(){
if(animating) return false;
animating = true;
current_fs = $(this).parent();
previous_fs = $(this).parent().prev();
//de-activate current step on progressbar
$("#progressbar li").eq($("fieldset").index(current_fs)).removeClass("active");
//show the previous fieldset
previous_fs.show();
//hide the current fieldset with style
current_fs.animate({opacity: 0}, {
step: function(now, mx) {
//as the opacity of current_fs reduces to 0 - stored in "now"
//1. scale previous_fs from 80% to 100%
scale = 0.8 + (1 - now) * 0.2;
//2. take current_fs to the right(50%) - from 0%
left = ((1-now) * 50)+"%";
//3. increase opacity of previous_fs to 1 as it moves in
opacity = 1 - now;
current_fs.css({'left': left});
previous_fs.css({'transform': 'scale('+scale+')', 'opacity': opacity});
},
duration: 800,
complete: function(){
current_fs.hide();
animating = false;
},
//this comes from the custom easing plugin
easing: 'easeInOutBack'
});
});
$(".submit").click(function(){
return false;
})ASKER
Hi,
I ended up putting the code here:
I tested it and it didn't work. Do you know why?
I ended up putting the code here:
duration: 800,
complete: function(){
current_fs.hide();
$(":text,:radio,:checkbox,textarea,select","fieldset:hidden").prop("disabled",true);
$(":text,:radio,:checkbox,textarea,select","fieldset:visible").prop("disabled",false);
animating = false;
}, I tested it and it didn't work. Do you know why?
do you have a link to let we see your page in live ?
ASKER
It's not actually live yet. I don't know if you can add some validation code to the example given at:
http://thecodeplayer.com/walkthrough/jquery-multi-step-form-with-progress-bar
I guess I would just need to see it working with that code and then I could implement with my own.
http://thecodeplayer.com/walkthrough/jquery-multi-step-form-with-progress-bar
I guess I would just need to see it working with that code and then I could implement with my own.
ASKER
Can I have this question deleted as it was solved in a different way because the person helping me did not continue.
yes, you can also request attention
I did not continu because you was not able to provide a sample page to see your code running
I did not continu because you was not able to provide a sample page to see your code running
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
I ended up using a plugin so the answer was not provided by Experts Exchange