<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Multiple step form</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script type="text/javascript" src="js/jquery-1.9.0.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/jquery.validate.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/additional-methods.js"></script>
<style type="text/css">
#personal_information,
#company_information{
display:none;
}
</style>
</head>
<body>
<div class="container">
<div class="col-lg-5">
<form class="form-horizontal" action="" method="POST" id="myform">
<fieldset id="account_information" class="">
<legend>Account information</legend>
<div class="form-group">
<label for="username" class="col-lg-4 control-label">Username</label>
<div class="col-lg-8">
<input type="text" class="form-control" id="username" name="username" placeholder="username">
</div>
</div>
<div class="form-group">
<label for="password" class="col-lg-4 control-label">Password</label>
<div class="col-lg-8">
<input type="password" class="form-control" id="password" name="password" placeholder="Password">
</div>
</div>
<div class="form-group">
<label for="conf_password" class="col-lg-4 control-label">Confirm password</label>
<div class="col-lg-8">
<input type="password" class="form-control" id="conf_password" name="conf_password" placeholder="Password">
</div>
</div>
<p><a class="btn btn-primary next">next</a></p>
</fieldset>
<fieldset id="company_information" class="">
<legend>Account information</legend>
<div class="col-md-12" >
<div id="field">
<div id="field0">
<!-- Text input-->
<div class="form-group">
<label class="col-md-3">Education level</label>
<div class="col-md-8">
<select class="form-control" name="edu_level[]" >
<option value="1">High school or equivalent</option>
<option value="2">Diploma</option>
<option value="3">Higher National Diploma</option>
<option value="4">Bachelo's</option>
<option value="5">Master's</option>
<option value="6">Doctorate</option>
</select>
</div>
</div>
<br><br>
<br>
<!-- Text input-->
<div class="form-group">
<label class="col-md-3">Field of Study</label>
<div class="col-md-8">
<input type="text" name="field_stu[]" id="field_stu" class="form-control" placeholder="e.g. Computer Science, Intellectual Property,Psychology." required>
</div>
</div>
<br><br>
<!-- Text input-->
<div class="form-group">
<label class="col-md-3">University</label>
<div class="col-md-8">
<input type="text" name="university[]" id="university" class="form-control" placeholder="" required>
</div>
</div>
<br><br>
<!-- Text input-->
<div class="form-group">
<label class="col-md-3">Time period</label>
<div class="col-md-8">
<div class="col-md-4">
<select class="form-control" name="edu_from[]" >
<option value="1995"> 1995 </option>
<option value="1996"> 1996 </option>
<option value="1997"> 1997 </option>
<option value="1998"> 1998 </option>
<option value="1999"> 1999 </option>
<option value="2000"> 2000 </option>
<option value="2001"> 2001 </option>
<option value="2002"> 2002 </option>
<option value="2003"> 2003 </option>
<option value="2004"> 2004 </option>
<option value="2005"> 2005 </option>
<option value="2006"> 2006 </option>
<option value="2007"> 2007 </option>
<option value="2008"> 2008 </option>
<option value="2009"> 2009 </option>
<option value="2010"> 2010 </option>
<option value="2011"> 2011 </option>
<option value="2012"> 2012 </option>
<option value="2013"> 2013 </option>
<option value="2014"> 2014 </option>
<option value="2015"> 2015 </option>
<option value="2016"> 2016 </option>
</select>
</div>
<div class="col-md-1">
<label>To</label>
</div>
<div class="col-md-4">
<select class="form-control" name="edu_to[]" >
<option value="1980"> 1980 </option>
<option value="2000"> 2000 </option>
<option value="2001"> 2001 </option>
<option value="2002"> 2002 </option>
<option value="2003"> 2003 </option>
<option value="2004"> 2004 </option>
<option value="2005"> 2005 </option>
<option value="2006"> 2006 </option>
<option value="2007"> 2007 </option>
<option value="2008"> 2008 </option>
<option value="2009"> 2009 </option>
<option value="2010"> 2010 </option>
<option value="2011"> 2011 </option>
<option value="2012"> 2012 </option>
<option value="2013"> 2013 </option>
<option value="2014"> 2014 </option>
<option value="2015"> 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>
</div>
</div>
</div>
<br><br>
<hr>
</div><!--end field0-->
</div><!--end field-->
<!-- Button -->
<div class="form-group">
<div class="col-md-4 col-md-offset-8">
<button id="add-more" name="add-more" class="btn btn-primary">Add More</button>
</div>
</div>
<br><br>
</div>
<p><a class="btn btn-primary next">next</a></p>
</fieldset>
<fieldset id="personal_information" class="">
<legend>Personal information</legend>
<div class="col-md-12">
<div id="fielda">
<div id="fielda0">
<!-- Text input-->
<div class="form-group">
<label class="col-md-3">Job Title</label>
<div class="col-md-8">
<input type="text" name="job_tit[]" id="job_tit" class="form-control" placeholder="e.g. Java/php Developer" required>
</div>
</div>
<br><br>
<br>
<!-- Text input-->
<div class="form-group">
<label class="col-md-3">Company</label>
<div class="col-md-8">
<input type="text" name="company[]" id="company" class="form-control" placeholder="" required>
</div>
</div>
<br><br>
<!-- Text input-->
<div class="form-group">
<label class="col-md-3">City</label>
<div class="col-md-8">
<input type="text" name="city[]" id="city" class="form-control" placeholder="" required>
</div>
</div>
<br><br>
<!-- Text input-->
<div class="form-group">
<label class="col-md-3">Time period</label>
<div class="col-md-8">
<div class="col-md-4">
<select class="form-control" name="work_from[]" >
<option value="1995"> 1995 </option>
<option value="1996"> 1996 </option>
<option value="1997"> 1997 </option>
<option value="1998"> 1998 </option>
<option value="1999"> 1999 </option>
<option value="2000"> 2000 </option>
<option value="2001"> 2001 </option>
<option value="2002"> 2002 </option>
<option value="2003"> 2003 </option>
<option value="2004"> 2004 </option>
<option value="2005"> 2005 </option>
<option value="2006"> 2006 </option>
<option value="2007"> 2007 </option>
<option value="2008"> 2008 </option>
<option value="2009"> 2009 </option>
<option value="2010"> 2010 </option>
<option value="2011"> 2011 </option>
<option value="2012"> 2012 </option>
<option value="2013"> 2013 </option>
<option value="2014"> 2014 </option>
<option value="2015"> 2015 </option>
<option value="2016"> 2016 </option>
</select>
</div>
<div class="col-md-1">
<label>To</label>
</div>
<div class="col-md-4">
<select class="form-control" name="work_to[]" >
<option value="1980"> 1980 </option>
<option value="2000"> 2000 </option>
<option value="2001"> 2001 </option>
<option value="2002"> 2002 </option>
<option value="2003"> 2003 </option>
<option value="2004"> 2004 </option>
<option value="2005"> 2005 </option>
<option value="2006"> 2006 </option>
<option value="2007"> 2007 </option>
<option value="2008"> 2008 </option>
<option value="2009"> 2009 </option>
<option value="2010"> 2010 </option>
<option value="2011"> 2011 </option>
<option value="2012"> 2012 </option>
<option value="2013"> 2013 </option>
<option value="2014"> 2014 </option>
<option value="2015"> 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>
</div>
</div>
</div>
<br>
<div class="form-group">
<input type="checkbox" name="cur_work[]" value="cur_work"> I currently work here<br>
</div>
<hr>
</div><!--end field0-->
</div><!--end field-->
<!-- Button -->
<div class="form-group">
<div class="col-md-4 col-md-offset-8">
<button id="add-more1" name="add-more" class="btn btn-primary">Add More</button>
</div>
</div>
<br><br>
</div>
<p><a class="btn btn-primary" id="previous" >Previous</a></p>
<p><input class="btn btn-success" type="submit" value="submit"></p>
</fieldset>
</form>
</div>
</div>
</body>
</html>
$(document).ready(function(){
// Custom method to validate username
$.validator.addMethod("usernameRegex", function(value, element) {
return this.optional(element) || /^[a-zA-Z0-9]*$/i.test(value);
}, "Username must contain only letters, numbers");
$(".next").click(function(){
var form = $("#myform");
form.validate({
errorElement: 'span',
errorClass: 'help-block',
highlight: function(element, errorClass, validClass) {
$(element).closest('.form-group').addClass("has-error");
},
unhighlight: function(element, errorClass, validClass) {
$(element).closest('.form-group').removeClass("has-error");
},
rules: {
username: {
required: true,
usernameRegex: true,
minlength: 6,
},
password : {
required: true,
},
conf_password : {
required: true,
equalTo: '#password',
},
company:{
required: true,
},
url:{
required: true,
},
name: {
required: true,
minlength: 3,
},
email: {
required: true,
minlength: 3,
},
},
messages: {
username: {
required: "Username required",
},
password : {
required: "Password required",
},
conf_password : {
required: "Password required",
equalTo: "Password don't match",
},
name: {
required: "Name required",
},
email: {
required: "Email required",
},
}
});
if (form.valid() === true){
if ($('#account_information').is(":visible")){
current_fs = $('#account_information');
next_fs = $('#company_information');
}else if($('#company_information').is(":visible")){
current_fs = $('#company_information');
next_fs = $('#personal_information');
}
next_fs.show();
current_fs.hide();
}
});
$('#previous').click(function(){
if($('#company_information').is(":visible")){
current_fs = $('#company_information');
next_fs = $('#account_information');
}else if ($('#personal_information').is(":visible")){
current_fs = $('#personal_information');
next_fs = $('#company_information');
}
next_fs.show();
current_fs.hide();
});
//@naresh action dynamic childs
var next_exp = 0;
$("#add-more1").click(function(e){
e.preventDefault();
var addto = "#fielda" + next_exp;
var addRemove = "#fielda" + (next_exp);
next_exp = next_exp + 1;
var newInp = ' <div id="fielda'+ next_exp +'" name="field1'+ next_exp +'"><div class="form-group"><label class="col-md-3">Job Title</label><div class="col-md-7"><input type="text" name="job_tit[]" id="job_tit" class="form-control" placeholder="e.g. Java/php Developer" required> </div><br><br><br><!-- Text input--><div class="form-group"><label class="col-md-3">Company</label><div class="col-md-7"><input type="text" name="company[]" id="company" class="form-control" placeholder="" required> </div> <div><br><br><!-- Text input--><div class="form-group"><label class="col-md-3">City</label> <div class="col-md-7"><input type="text" name="city[]" id="city" class="form-control" placeholder="" required></div></div><br><br><!-- Text input--><div class="form-group"><label class="col-md-3">Time period</label><div class="col-md-8"><div class="col-md-3"><select class="form-control" name="work_from[]" ><option value="1995"> 1995 </option><option value="1996"> 1996 </option><option value="1997"> 1997 </option><option value="1998"> 1998 </option><option value="1999"> 1999 </option><option value="2000"> 2000 </option><option value="2001"> 2001 </option><option value="2002"> 2002 </option><option value="2003"> 2003 </option><option value="2004"> 2004 </option><option value="2005"> 2005 </option><option value="2006"> 2006 </option><option value="2007"> 2007 </option><option value="2008"> 2008 </option><option value="2009"> 2009 </option><option value="2010"> 2010 </option><option value="2011"> 2011 </option><option value="2012"> 2012 </option><option value="2013"> 2013 </option><option value="2014"> 2014 </option><option value="2015"> 2015 </option><option value="2016"> 2016 </option></select></div><div class="col-md-1"><label>To</label></div><div class="col-md-3"><select class="form-control" name="work_to[]" ><option value="1980"> 1980 </option><option value="2000"> 2000 </option><option value="2001"> 2001 </option><option value="2002"> 2002 </option><option value="2003"> 2003 </option><option value="2004"> 2004 </option><option value="2005"> 2005 </option><option value="2006"> 2006 </option><option value="2007"> 2007 </option><option value="2008"> 2008 </option><option value="2009"> 2009 </option><option value="2010"> 2010 </option><option value="2011"> 2011 </option><option value="2012"> 2012 </option><option value="2013"> 2013 </option><option value="2014"> 2014 </option><option value="2015"> 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></div></div></div><br><br><div class="form-group"><input type="checkbox" name="cur_work[]" value="cur_work"> I currently work here<br></div><br><hr></div>';
var newInput = $(newInp);
var removeBtn = '<button id="remove' + (next_exp - 1) + '" class="btn btn-danger remove-me" >Remove</button></div></div><div id="field"><br>';
var removeButton = $(removeBtn);
$(addto).after(newInput);
$(addRemove).after(removeButton);
$("#fielda" + next_exp).attr('data-source',$(addto).attr('data-source'));
$("#count").val(next_exp);
$('.remove-me').click(function(e){
e.preventDefault();
var fieldNum = this.id.charAt(this.id.length-1);
var fieldID = "#fielda" + fieldNum;
$(this).remove();
$(fieldID).remove();
});
});
//@naresh action dynamic childs
var nextedu = 0;
$("#add-more").click(function(e){
e.preventDefault();
var addto = "#field" + nextedu;
var addRemove = "#field" + (nextedu);
nextedu = nextedu + 1;
var newIn = ' <div id="field'+ nextedu +'" name="field'+ nextedu +'"><div class="form-group"><label class="col-md-3">Education level</label><div class="col-md-7"><select class="form-control" name="edu_level[]" ><option value="1">High school or equivalent</option><option value="2">Diploma</option><option value="3">Higher National Diploma</option><option value="4">Bachelos</option><option value="5">Masters</option><option value="6">Doctorate</option></select></div></div><br><br><br><!-- Text input--><div class="form-group"><label class="col-md-3">Field of Study</label><div class="col-md-7"><input type="text" name="field_stu[]" id="field_stu" class="form-control" placeholder="e.g. Computer Science, Intellectual Property,Psychology." required> </div></div><br><br><!-- Text input--><div class="form-group"><label class="col-md-3">University</label><div class="col-md-7"><input type="text" name="university[]" id="university" class="form-control" placeholder="" required></div></div><br><br><!-- Text input--><div class="form-group"><label class="col-md-3">Time period</label><div class="col-md-8"><div class="col-md-3"><select class="form-control" name="edu_from[]" ><option value="1995"> 1995 </option><option value="1996"> 1996 </option><option value="1997"> 1997 </option><option value="1998"> 1998 </option><option value="1999"> 1999 </option><option value="2000"> 2000 </option><option value="2001"> 2001 </option><option value="2002"> 2002 </option><option value="2003"> 2003 </option><option value="2004"> 2004 </option><option value="2005"> 2005 </option><option value="2006"> 2006 </option><option value="2007"> 2007 </option><option value="2008"> 2008 </option><option value="2009"> 2009 </option><option value="2010"> 2010 </option><option value="2011"> 2011 </option><option value="2012"> 2012 </option><option value="2013"> 2013 </option><option value="2014"> 2014 </option><option value="2015"> 2015 </option><option value="2016"> 2016 </option></select></div><div class="col-md-1"><label>To</label></div><div class="col-md-3"><select class="form-control" name="edu_to[]" ><option value="1980"> 1980 </option><option value="2000"> 2000 </option><option value="2001"> 2001 </option><option value="2002"> 2002 </option><option value="2003"> 2003 </option><option value="2004"> 2004 </option><option value="2005"> 2005 </option><option value="2006"> 2006 </option><option value="2007"> 2007 </option><option value="2008"> 2008 </option><option value="2009"> 2009 </option><option value="2010"> 2010 </option><option value="2011"> 2011 </option><option value="2012"> 2012 </option><option value="2013"> 2013 </option><option value="2014"> 2014 </option><option value="2015"> 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></div></div></div> <br><hr></div>';
var newInput = $(newIn);
var removeBtn = '<button id="remove' + (nextedu - 1) + '" class="btn btn-danger remove-me" >Remove</button></div></div><div id="field">';
var removeButton = $(removeBtn);
$(addto).after(newInput);
$(addRemove).after(removeButton);
$("#field" + nextedu).attr('data-source',$(addto).attr('data-source'));
$("#count").val(nextedu);
$('.remove-me').click(function(e){
e.preventDefault();
var fieldNum = this.id.charAt(this.id.length-1);
var fieldID = "#field" + fieldNum;
$(this).remove();
$(fieldID).remove();
});
});
});
</script>
