Hi dear friends! Today I have brought you another interesting tutorial. That is how to create a form with multiple divisions. When we build forms for applications some of them are very lengthier. There for we would like to divide the form into several steps. We can group the information and for those groups we can show as separately. Yet it is a one form. It can contains multiple form tags. It contains only one form tag. Inside form tag we create separate divisions and show the contents. We can do it simply by jQuery.
Here we are not using hide and show methods. If we use hide and show we have to write many codes. Instead we are using display and visibility in jQuery. If you like you can use hide and show there is no harm in that. Let’s start the tutorial.
HTML code for wizard form
<form>
<div id="1" name="1">
<h1>Personal Information</h2>
<input id="" name="" />
<!---- type your inputs -------->
<button type="button" id="nextbutton" name="nextbutton">Next</button>
</div>
<div id="2" name="2">
<h1>Education Information</h2>
<input id="" name="" />
<!---- type your inputs -------->
<button type="button" id="nextbutton" name="nextbutton">Next</button>
</div>
<div id="3" name="3">
<h1>Professional Information</h2>
<input id="" name="" />
<!---- type your inputs -------->
<button type="button" id="nextbutton" name="nextbutton">Next</button>
</div>
</form>
jQuery code for creating wizard form
//hide all divisions inside form
$("#1").css("visibility","visible");
$("#1").css("display","block");
$("#2").css("visibility","hidden");
$("#2").css("display","none");
$("#3").css("visibility","hidden");
$("#3").css("display","none");
$("form").on('click','button',function(e){
e.preventDefault();
var from_page = $(this).closest('div').attr('name');
var to_page = $(this).closest('div').next().attr('name');
function divchange(divfrom,divto){
var divfid = "#"+from_page;
var divtid = "#"+to_page;
$(""+divtfid +"").css("display","none");
$(""+divtfid +"").css("visibility","hidden");
$(""+divtid +"").css("display","block");
$(""+divtid +"").css("visibility","visible");
}
divchange(divfrom,divto);
});
Difference in visibility hidden and display none
In visibility none the space for the element is there. Actually what happen is the element is there so it take it’s space. Yet since it is not visible in user interface we can’t see the elements. We only can see big empty space. IN display none the element also removed from code. Therefore we can’t see empty space. When display block or inline it will bind the block. Simply in visibility hidden space is there but we can’t see anything. In display none space is also gone we can see them either.
Conclusion
Hope you have understood this well. This will help for your development. If you like this please don’t forget to share and comment. Please check our How to use jQuery validator plugin to validate your forms. We will meet again with another interesting tutorial till then goodbye!
Very useful
It is actually a great and helpful piece of info. I’m glad that you simply shared this useful information with us. Please stay us up to date like this. Thanks for sharing.
Thank you so much
Thank you for every other excellent article. The place else may just anyone get that type of info in such a perfect manner of writing? I’ve a presentation subsequent week, and I’m at the search for such info.
Thank you