Wednesday, July 23, 2014

Create a Multi-Step Form Portlet in liferay

I've spent a lot of time to search this feature.
when i have to create a web form or a registration portlet in multistep in liferay.
so we only use a single jsp to create the form and show and hide the fields using java script.

in your view.jsp put this code :)


<html>
<head>
<title>Multistep Registration Form</title>
<!--including css file here--->
<link rel="stylesheet" type="text/css" href="/css/main.css"/>
<!--including Javascript file here--->
<script type ="text/javascript" src="/js/main.js"></script>
</head>
<body>
<div class="content"
<!-- multistep form -->
<div class="main">
<form class="regform" action="" method ="get">
 <!-- progressbar -->
 <ul id="progressbar">
 <li id="active1">Create Account</li>
 <li id="active2">Educational Profiles</li>
 <li id="active3">Personal Details</li>
 </ul>
 <!-- fieldsets -->
 <fieldset id="first">
 <h2 class="title">Create your account</h2>
 <p class="subtitle">Step 1</p>
 <input type="text" name="email" placeholder="Email" /><br/>
 <input type="password" name="pass" placeholder="Password" /><br/>
 <input type="password" name="cpass" placeholder="Confirm Password" /><br/>
 <input type="button" id="next_btn1" value="Next" onclick="next_step1()" />
 </fieldset>
 <fieldset id="second">
 <h2 class="title">Educational Profiles</h2>
 <p class="subtitle">Step 2</p>
 <select class="options">
 <option>--Select Education--</option>
 <option>Post Graduate</option>
 <option>Graduate</option>
 <option>HSC</option>
 <option>SSC</option>
 </select><br/>
 <input type="text" name="marks" placeholder="Marks Obtained" /><br/>
 <input type="text" name="pyear" placeholder="Passing Year" /><br/>
 <input type="text" name="univ" placeholder="University" /><br/>
 <input type="button" id="pre_btn1" value="Previous" onclick="prev_step1()"/>
 <input type="button" name="next" id="next_btn2" value="Next" onclick="next_step2()" />
 </fieldset>
 <fieldset id="third">
 <h2 class="title">Personal Details</h2>
 <p class="subtitle">Step 3</p>
 <input type="text" name="fname" placeholder="First Name" /><br/>
 <input type="text" name="lname" placeholder="Last Name" /><br/>
 <input type="text" name="cont" placeholder="Contact" /><br/>
 <label>Gender</label><br/>
 <input name="gender" type="radio"/>Male<br/>
 <input name="gender" type="radio"/>Female<br/>
 <textarea name="address" placeholder="Address"></textarea><br/>
 <input type="button" id="pre_btn2" value="Previous" onclick="prev_step2()"/>
 <input type="submit" class="submit_btn" value="Submit" />
 </fieldset>
</form>
</div>
</div>
</body>
</html>

and in your main.js file put this...


/*------------validation function-----------------*/
var count=0; // to count blank fields
function validation(event){
 //fetching radio button by name
 var radio_check = document.getElementsByName('gender');
 //fetching all inputs with same class name text_field and an html tag textarea
 var input_field = document.getElementsByClassName('text_field');
 var text_area = document.getElementsByTagName('textarea');
 //validating radio button
 if(radio_check[0].checked== false && radio_check[1].checked== false){
 var y = 0;
 }
 else{
 var y = 1;
 }
 //for loop to count blank inputs
 for(var i=input_field.length;i>count;i--){
 if(input_field[i-1].value==''|| text_area.value=='')
 {
 count = count + 1;
 }
 else{
 count = 0;
 }
 }
 //Notifying validation
 if(count!=0||y==0){
 alert("*All Fields are mandatory*");
 event.preventDefault();
 }
 else{
 return true;
 }
}
/*---------------------------------------------------------*/
//Function that executes on click of first next button
function next_step1(){
 document.getElementById("first").style.display="none";
 document.getElementById("second").style.display="block";
 document.getElementById("active2").style.color="red";
 }
//Function that executes on click of first previous button
function prev_step1(){
 document.getElementById("first").style.display="block";
 document.getElementById("second").style.display="none";
 document.getElementById("active1").style.color="red";
 document.getElementById("active2").style.color="gray";
 }
//Function that executes on click of second next button
function next_step2(){
 document.getElementById("second").style.display="none";
 document.getElementById("third").style.display="block";
 document.getElementById("active3").style.color="red";
 }
//Function that executes on click of second previous button
 function prev_step2(){
 document.getElementById("third").style.display="none";
 document.getElementById("second").style.display="block";
 document.getElementById("active2").style.color="red";
 document.getElementById("active3").style.color="gray";
 }

and in your main.css put this file :)

@import url(http://fonts.googleapis.com/css?family=Droid+Serif); /* to import google font style */
.content{
 width:960px;
 margin:20px auto;
 }
.main{
 float:left;
 width: 650px;
 margin-top:80px;
 }
#progressbar{
 margin:0;
 padding:0;
 font-size:18px;
 }
#active1{
 color:red;
 }
fieldset{
 display:none;
 width: 350px;
 padding:20px;
 margin-top:50px;
 margin-left: 85px;
 border-radius:5px;
 box-shadow: 3px 3px 25px 1px gray;
 }
#first{
 display:block;
 width: 350px;
 padding:20px;
 margin-top:50px;
 border-radius:5px;
 margin-left: 85px;
 box-shadow: 3px 3px 25px 1px gray;
 }
input[type=text],
input[type=password],
select{
 width:100%;
 margin:10px 0;
 height:40px;
 padding:5px;
 border: 3px solid rgb(236, 176, 220);
 border-radius: 4px;
 }
textarea{
 width:100%;
 margin:10px 0;
 height:70px;
 padding:5px;
 border: 3px solid rgb(236, 176, 220);
 border-radius: 4px;
 }
input[type=submit],
input[type=button]{
 width: 120px;
 margin:15px 25px;
 padding: 5px;
 height: 40px;
 background-color: sienna;
 border: none;
 border-radius: 4px;
 color: white;
 font-family: 'Droid Serif', serif;
 }
h2,p{
 text-align:center;
 font-family: 'Droid Serif', serif;
 }
li{
 margin-right:52px;
 display:inline;
 color:#c1c5cc;
 font-family: 'Droid Serif', serif;
 }

 for demo :- Live Demo


Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)