jQuery plugin based on top of jQuery UI which turns a form into a multistep wizard. Integrates with the jQuery form plugin for AJAX submission of the form, the validation plugin for client side validation and the BBQ plugin for enabling the browsers back and forward buttons.
Can you please make the documentation available again? I'm using this plugin in an old template and really need to know how to program in it
Hi!
I want to ask if exists a method to get the json string before press "submit"
I've been tracking down an ilusive CSS issue in the site we are developing.
In IE8, everything inside the step container suffers two visual problems:
The actual culprit seems to be jquery. In particular the easing. When the animation is complete there are fragments of CSS remaining in the style attribute of the step container.
style="zoom: 1; filter: ; display: inline"
If - using the F12 developer tools - I remove the empty filter value the problem goes away. It also goes away if I get rid of the zoom attribute.
But these are part of jquery and I don't necessarily want to get into hacking the jquery library. Are they known bugs? .... IDK!
All my problem would go away if I could disable the animation of the form wizard.
Hi,
I am trying to use the from wizard inside a JQUERY Dialog but it does not work correctly.
This is what I am doing:
The form is working fine actually, but when I close the dialog it only removes the Dialog overlay background. The dialog window stays visible.
Anybody an idea?
File uploads do not work when formPluginEnabled:true . Any idea as to how do i resolve it. Thanks
Hello! I have a problem. Sometimes after fast click, double click on "next"/"previous" step buttons, i see a few steps on the screen.
Thanks!
The user defined success callback is not being called in Jquery 1.5. This is true in the included version of the form plugin as well as the most recent version pulled from their github repository. I suspect the problem lies in the form plugin's use of jqueries ajax functions which where revamped in 1.5.
Hi,
There is a way to have a preview of the whole form? I'm trying to use a third button to do this but i can't.
Hi,
I'm using this amazing wizard, btw thanks for this awesome piece of work.
The 'focusFirstInput' option action should focus first input that's not readonly or disabled, thats assert is correct?
Thanks,
Gabriel Marquez
Hi,
I've been using your plugin for some time now with very little problem, however, I have changed a little bit of code, which I believe hardly relates to the form wizard and halfway through the process of filling in a form, clicking the next button goes and submits the form instead of firing what it needs to go to the next step.
This is consistently happening at a particular step in the form wizard. This behaviour is very very strange and any help in trying to resolve the issue would be very helpful.
If you would like to have a look at the code that I used to initiate the form wizard I can send you a link for you to have a look.
Thanks in advance.
I have a form wizard working for my software in Firefox and IE, but in Chrome, the steps that have been passed or moved backed are still visible on the screen.
Hello, thanks for the great work.
I have a dropdown with two options, Yes or No.
if yes is selected, continue to step 2.
if no is selected, continue to a sorry step and don't allow further submission of form.
Can this be done?
Also, does this work with codeigniter?
Many thanks.
I'm not sure how to prevent a user going to a random step (for example steps are in the header) using the 'show' method when the current step is not valid.
eg:
$('.checkout-steps a').on('click', function(){
var gotostep = $(this).data('gotostep');
//if(the.current.step.is.valid()) {
checkoutWizard
.formwizard('show', gotostep);
});Validation fails for fields on the page - but the user can go to the next (or any) step. The user can then submit the form (bypassing validation)
hi i have 4 buttons set to each step e.g.:
<div id="form-menu">
<a href="#=&_book=personal" class="form-personal" onclick="addc('personal')">Your Detail</a>
<a href="#=&_book=speaker" class="form-speaker" onclick="addc('speaker')">Speaker</a>
<a href="#=&_book=venue" class="form-venue" onclick="addc('venue')">Venue</a>
<a href="#=&_book=additional" class="form-additional" onclick="addc('additional')">Additional</a>
</div> <!-- form menu -->
i made the menu clickable to change steps, but it didn't work so well on validation part, so may remove the on click function, but how do i extend formwiz state so that e.g.: class="form-speaker"(or the 2nd step) will add an active class to it as you click next.
i know you can add state navigation, but that is adding new elements to the form. I only want to add class of current active state to the navigation menu.
Hi,
Is there a way I can to do some sort of "before show" on a form step?
I'm trying to hide the submit button under some circumstances when a form step is show.
I'm currently doing it on the step_show event, but there is a flicker.
Is there a way I can hook into some sort of before show event? Or perhaps another way I could do it?
If not would it be a good feature of formwizard?
Keep up the good work (awesome plugin!)
-thanks for your help
Alex.
Hi All,
I am having some problems with the wizardNavigation inside JQUERY dialog.
When I press next on the form the following happens:
I had the implementation working by loading the form content (and JS script) using an AJAX call to the server.
So the content was loaded dynamically into the dialog. And the dialog div was also loaded inside an event handler and added to the "body" element.
Anybode some ideas, try outs??
Thanks!
Is it possible to add an after_submit step to the formwizard to perhaps show a success message and a close button?
Please specify the licence to enable developers to use this magnificent product of yours
The success callback function does not return responseText and statusText.
Is there a way to execute stuff when wizard is initially loaded to the page (for example disable next button if some field is empty)?
If you want to maintain minified versions of your source code in the master repo, my suggestion would be to make another branch ("develop" or something similar) that will take over as the main development branch. That way, you can merge changes to master and tag versions on master while maintaining the proper minified files as well, and you will be able to develop on the other branch without interfering or having the minified files fall behind.
It is not easy to understand how exactly branching feature works.
By looking at example_2_branch.html I cannot find branching configuration.
Does the plugin somehow autodetect that I want to branch by looking at the option values of any select element on any step?
If yes this is a bug, because I might end up with a branch without really wanting it, just because some names matched with ids.
In any case nowhere is documented how branching really works.
I believe the default behaviour of the plugin should be the "branching not enabled".
I have a strange problem with form wizard in conjunction with OSX style simplemodal dialog.
Steps to reproduce,
First time when i load the wizard, the form navigates fine to second step.
Close the wizard using close button (x)
Open the dialog again, and press Next.
It directly submits the form without going to next step.
First time when i load the wizard, the form navigates fine to second step.
Close the wizard using close button (x)
Open the dialog again, and press close again.
It throws javascript type error - uncaught type error for .find method in destroy method.
and the page hangs.
The problem only goes after reloading the page.
I have been banging my head over this for few days now. All i can figure out from Chrome javascript console is that this.element becomes undefined after closing the form first time.
Please help. Here's the code
$(document).ready(function () {
$("#addDeviceForm").formwizard({
formPluginEnabled: false,
validationEnabled: true,
focusFirstInput : true,
validationOptions:{
rules: {
imei:{
maxlength : 15,
minlength : 15
},
phone:{
number: true,
maxlength : 10,
minlength : 10
}
},
messages: {
imei:{
number: "Please enter valid number",
maxlength: "Please enter IMEI of 15 characters",
minlength: "Please enter IMEI of 15 characters"
},
phone:{
number: "Please enter valid number",
maxlength: "Please enter Phone number of 10 digits",
minlength: "Please enter Phone number of 10 digits"
}
}
},
disableUIStyles : true
});
});
HTML CODE
<div id="osx-modal-content" style="display: none">
<div id="osx-modal-title">Add a Device</div>
<div class="close">
<a href="#" class="simplemodal-close">x</a>
</div>
<div id="osx-modal-data">
<form id="addDeviceForm" onSubmit="return submitEnrollmentForm();"
class="bbq">
<div id="wizardHeader">
<span class="wizard button"><b>Step 1</b><small>Device
Basics</small></span> <span class="wizard buttonAction"><b>Step 2</b><small>Device
Details</small></span><span class="wizard buttonAction"><b>Step 3</b><small>Device
Details</small></span>
</div>
<div id="addDeviceSteps">
<fieldset class="step" id="first">
<dl style="height: 400px;">
<dt>
<label>User Name<span class="mandatory">*</span></label>
</dt>
<dd>
<input type="text" title="Enter user name" value="Enter user name" class="required"
name="userName" id="userName" autocomplete="on">
</dd>
<dt>
<label>Email Address<span class="mandatory">*</span></label>
</dt>
<dd>
<input type="text" title="Enter email" value="Enter email" class="required email"
name="email" id="email">
</dd>
<dt>
<label>Domain<span class="mandatory">*</span></label>
</dt>
<dd>
<input type="text" title="Enter Domain" value="Enter Domain" class="required"
id="domain" name="domain">
</dd>
<dt>
<label>Device Name<span class="mandatory">*</span></label>
</dt>
<dd>
<input type="text" title="Enter Device Name" value="Enter Device Name" id="deviceName"
name="deviceName" class="required">
</dd>
<dt>
<label>Personal Email Address</label>
</dt>
<dd>
<input type="text" title="" value="" class="email" name="personalEmail"
id="personalEmail">
</dd>
<dt>
<label>Phone Number<span class="mandatory">*</span></label>
</dt>
<dd>
<input style="width: 30px" type="text" title="91" value="91" maxlength="3"
class="required number" id="countrycode"> <input
type="text" id="phone" name="phone" title="Enter phone number" value="Enter phone number" maxlength="10"
style="width: 204px; margin: 0 0 0 10px"
class="required number">
</dd>
<dt>
<label>Ownership Details<span class="mandatory">*</span></label>
</dt>
<dd>
<select id="ownership" name="ownership" class="dropdown selectbox2" tabindex="3">
<option value="Corporate">Corporate</option>
<option value="Employee">Employee</option>
<option value="Shared">Shared</option>
</select>
</dd>
<div class="clear_both"></div>
<dt>
<label>Email Notification<span class="mandatory">*</span></label>
</dt>
<dd>
<select name="emailNotification" id="emailNotification"
class="dropdown selectbox2" tabindex="3">
<option value="User">User</option>
<option value="AdminUser">Admin & User</option>
</select>
</dd>
<div class="clear_both"></div>
<dt>
<label>Device OS<span class="mandatory">*</span></label>
</dt>
<dd>
<select id="platformType" name="state105"
class="dropdown selectbox2" tabindex="3">
<!-- <option value="">Select Device OS</option> -->
<c:forEach items="${platforms}" var="platform">
<option value='${platform.id}'>${platform.platformName}</option>
</c:forEach>
</select>
</dd>
<div class="clear_both"></div>
<dt></dt>
<dd><input type="checkbox" name="allowDevice" id="allowDevice"
style="width: 25px; margin: 0px 0px 0px 0px;">Only enroll devices from selected platform
</dd>
</dl>
</fieldset>
<fieldset class="step" id="second">
<dl style="width: 720px; height: 420px;">
<dt>
<label> Warranty Expiration Date</label>
</dt>
<dd>
<input type="text" title="DD/MM/YYYY" value="DD/MM/YYYY" class="calendar" size="10" maxlength="10"
id="warrantyExpDate" name="warrantyExpDate" readonly="readonly">
</dd>
<dt>
<label>Warranty Number</label>
</dt>
<dd>
<input type="text" title="Enter Warranty Number" value="Enter Warranty Number"
class="input_style_12" id="warrantyNumber"
name="warrantyNumber">
</dd>
<dt>
<label>Warranty Type</label>
</dt>
<dd>
<select id="warrantyType" name="warrantyType" class="dropdown selectbox2" tabindex="3">
<option value="-1" selected>Select Warranty Type</option>
<option value="M_Warranty">Manufacturer warranty</option>
<option value="S_Warranty">Seller warranty</option>
<option value="E_Warranty">Extended warranty</option>
</select>
</dd>
<div class="clear_both"></div>
<dt>
<label>Custom Asset Number</label>
</dt>
<dd>
<input type="text" title="Enter Custom Asset Number" value="Enter Custom Asset Number"
class="input_style_12" id="customAssetNo" name="customAssetNo">
</dd>
<dt>
<label>Purchase Date</label>
</dt>
<dd>
<input type="text" title="DD/MM/YYYY" value="DD/MM/YYYY" class="calendar" size="10" maxlength="10"
id="purchaseDate" name="purchaseDate" readonly="readonly">
</dd>
<dt>
<label> Purchase Order Number</label>
</dt>
<dd>
<input type="text" title="Enter Purchase Order Number" value="Enter Purchase Order Number"
class="input_style_12" id="purchaseOrderNo"
name="purchaseOrderNo">
</dd>
<dt>
<label>Purchase Price</label>
</dt>
<dd>
<input type="text" title="0.0" value="0.0" class="input_style_12 number"
id="purchasePrice" name="purchasePrice">
</dd>
<div class="clear_both"></div>
<dt>
<label> Purchase Type</label>
</dt>
<dd>
<select id="purchaseType" name="purchaseType" class="dropdown selectbox2" tabindex="3">
<option value="-1" selected>Select Purchase Type</option>
<option value="SinglePurchase">Single purchase</option>
<option value="VolumePurchase">Volume purchase</option>
</select>
</dd>
<div class="clear_both"></div>
<dt>
<label>Vendor</label>
</dt>
<dd>
<select id="vendorName" name="vendorName" class="dropdown selectbox2" tabindex="3">
<option value ="-1" selected>Select Vendor</option>
<option value="Apple">Apple</option>
<option value="Samsung">Samsung</option>
<option value="LG">LG</option>
<option value="Nokia">Nokia</option>
<option value="HTC">HTC</option>
<option value="Motorola">Motorola</option>
<option value="Blackberry">Blackberry</option>
</select>
</dd>
<div class="clear_both"></div>
<dt>
<label>Model/Device ID</label>
</dt>
<dd>
<input type="text" title="Enter Model/Device ID" value="Enter Model/Device ID"
class="input_style_12" id="deviceId" name="deviceId">
</dd>
<dt>
<label>IMEI</label>
</dt>
<dd>
<input type="text" value="" class="input_style_12" size="15" maxlength="15"
id="imei" name="imei">
</dd>
<div class="clear_both"></div>
<!-- <dt>
<label>Comments (Max 200 characters)</label>
</dt>
<dd>
<textarea class="" id="comments" name="comments" maxlength="200"></textarea>
</dd> -->
</dl>
</fieldset>
<!-- <fieldset class="step" id="third">
<div style="padding: 0 10px">
An enrollment request and registration instructions have been sent
to the registered Email Address and phone number.<br />
<br /> The device can also be registered by accessing the below
URL from the device.<br />
<br /> URL:http://services.kony.com/mdm
</div>
</fieldset> -->
</div>
<div id="formFooter">
<dt>
<input class="navigation_button buttonControl" id="back"
value="Back" type="reset" hidden="true"/>
</dt>
<dd>
<input class="navigation_button buttonControl" id="next"
value="Submit" type="submit" />
</div>
</dd>
</dl>
</form>
</div>
</div>
Please note this is used in conjection with OSX simplemodal dialog jquery plugin.
http://thecodemine.org is only loading malware. I don't imagine this is the intent of the site! :/
I think the solution for the back and next (and also submit) buttons is incorrect.
Javascript is making the wizard, so javascript should create those buttons, tu put them in HTML and to modify them in JS is an error.
I think a better solution is to create those buttons from Javascript with a default HTML markup and to permit the user pass a custom HTML markup for the buttons too.
Finally, Nex button should not be converted to Submit button, Next button should dissapear in the last step (or be disabled).
Submit button should be declared in HTML, and with any preferred element (input type submit, input type image, button, etc).
Changing that our HTML is cleaner and can work even without JS.
Is it possible to include the option to submit a form at multiple steps? I have a 6 step form and would like the user to have the option to choose between submitting the form and moving to the next step (2 buttons) on step 4 and 5.
Is there a method for closing the wizard after submit success? I tried $("#wizard").formwizard("hide"); but didnt work
Dears,
Is there anyway to submit the Form using Form Plugin on Last Step Before Shown Event.
Regards,
KM
Hello!
I'm facing a little problem here.
Seems success is never called as it always proceed to the next step.
Even putting a breakpoint it doesn't stop in the function.
remoteAjax : {
'segnalazione-nonloggato': {
url : "/utente/registrazione",
dataType : 'json',
beforeSend : function () {
$('#loadingDialog').dialog('open');
},
complete: function(xhr) {
$('#loadingDialog').dialog('close');
},
success : function(data) {
if (data.id !== null) {
return true;
}
return false;
}
}
}Hi,
I have a form with steps B, C, D, E, F ... with a radio on step B, if i select one of the 2 choices i have to be able to see step G after F if i choose the oder i have to jump from step F to H but i can't find a way to do it....is there a way to do this?
While I understand the rationale of making this plugin a jQuery UI widget, it does seem to me that it adds some unnecessary requirements and overhead. As far as I can tell, it isn't really using anything from the UI library itself, other than the namespace. If this is the case, it would probably be better to leave it as a simple jQuery plugin, since it is obviously dependent on that, unless of course you have further plans for some jQuery.UI implementations...
I would like to hear other people's feedback on this.
Formwizard (3.0.7) has been working well for several months but discovered today that formOptions stopped working. Namely: success: and resetForm are not working in either of the two forms in my project. The only change is that I am now using jQuery 1.9.0 and jQuery UI 1.10.0 ... and now formOptions are not triggered at all.
Not enough time to make a proper PR, but I'll post this here in case it helps anyone.
I'm hiding steps in my backend code by changing the class on a step from .step to .hidden-step. This works great, but navigating with the "Next" button causes the plugin to attempt to show our .hidden-step element instead of skipping it and showing the next .step element.
Here's the fix. Make the change to the _navigate() function:
// var step1 = this.steps.filter("#" + step).next().attr("id"); //Original, gets next sibling (regardless of what it is!).
var step1 = this.steps.filter("#" + step).nextAll(".step").first().attr("id"); //Fixed by rinogo, 11/27/17, gets next ".step"
Hey, first off, thanks for the great plugin.
Secondly, I'm noticing a weird issue with the validation plugin in conjunction with this. I am coding in asp.net so as you know, i unfortunately have one form tag that wraps my entire page. Not a huge issue for my implementation of this, as i can set the plugin to do $("#form1").formwizard(); and it finds my steps and makes the wizard. Everything works when i initialize the plugin like that, specificing the form id as the selector.
However, if i set the plugin to the wrapping container like $("#stepscontainer").formwizard(); the wizard is created successfully, but upon hitting any buttons within the form for navigation, i get a javascript error of validator is undefined.
I'm not sure what's going on with this, if it's a validator bug (since you are passing my selector to the validator, and the validator is not being able to initialize on an element (like it needs the form??). or if it's a bug within the formwizard, like it should always just pass the form element to the validator instead of the specified selector.
Thoughts?
Thanks!
Cannot add checkboxes or radio inputs!
Id like to add some radio buttons and checkboxes to the form but even with custom css formatting the buttons dont work.
please help!
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.