Hi nilupul4242,
Refer the below modified code.
HTML
<script type="text/javascript">
var currentTabnew;
var last = sessionStorage.getItem('tab');
// Current tab is set to be the first tab (0)
if (parseInt(last) == 0 || last == null) {
currentTabnew = 0;
} else {
currentTabnew = last;
}
sessionStorage.setItem("tab", currentTabnew);
window.onload = function () {
//debugger;
var current = sessionStorage.getItem("tab");
showTab(current); // Display the current tab
}
function showTab(n) {
// This function will display the specified tab of the form ...
var x = document.getElementsByClassName("tab");
x[n].style.display = "block";
// ... and fix the Previous/Next buttons:
if (n == 0) {
document.getElementById("prevBtn").style.display = "none";
} else {
document.getElementById("prevBtn").style.display = "inline";
}
if (n == (x.length - 1)) {
document.getElementById("nextBtn").innerHTML = "Submit";
} else {
document.getElementById("nextBtn").innerHTML = "Next";
}
// ... and run a function that displays the correct step indicator:
fixStepIndicator(n)
}
function nextPrev(n) {
// This function will figure out which tab to display
var x = document.getElementsByClassName("tab");
// Exit the function if any field in the current tab is invalid:
if (n == 1 && !validateForm()) return false;
// Hide the current tab:
x[currentTabnew].style.display = "none";
// Increase or decrease the current tab by 1:
currentTabnew = parseInt(currentTabnew) + n;
// if you have reached the end of the form... :
if (currentTabnew >= x.length) {
//...the form gets submitted:
sessionStorage.setItem("tab", 0);
//document.getElementById("regForm").submit();
return false;
}
// Otherwise, display the correct tab:
showTab(currentTabnew);
sessionStorage.setItem("tab", currentTabnew);
}
function validateForm() {
// This function deals with validation of the form fields
var x, y, i, valid = true;
x = document.getElementsByClassName("tab");
y = x[currentTabnew].getElementsByTagName("input");
// A loop that checks every input field in the current tab:
for (i = 0; i < y.length; i++) {
// If a field is empty...
if (y[i].value == "") {
// add an "invalid" class to the field:
y[i].className += " invalid";
// and set the current valid status to false:
valid = false;
}
}
// If the valid status is true, mark the step as finished and valid:
if (valid) {
document.getElementsByClassName("step")[currentTabnew].className += " finish";
}
return valid; // return the valid status
}
function fixStepIndicator(n) {
// This function removes the "active" class of all steps...
var i, x = document.getElementsByClassName("step");
for (i = 0; i < x.length; i++) {
x[i].className = x[i].className.replace(" active", "");
}
//... and adds the "active" class to the current step:
x[n].className += " active";
}
</script>
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet" />
<style type="text/css">
* {
box-sizing: border-box;
}
#regForm {
background-color: #ffffff;
margin: 100px auto;
font-family: Raleway;
padding: 40px;
width: 70%;
min-width: 300px;
margin-bottom: 5px;
}
h1 {
text-align: center;
}
input {
padding: 10px;
width: 100%;
font-size: 17px;
font-family: Raleway;
border: 1px solid #aaaaaa;
}
/* Mark input boxes that gets an error on validation: */
input.invalid {
background-color: #ffdddd;
}
/* Hide all steps by default: */
.tab {
display: none;
}
/* Make circles that indicate the steps of the form: */
.step {
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbbbbb;
border: none;
border-radius: 50%;
display: inline-block;
opacity: 0.5;
}
.step.active {
opacity: 1;
}
/* Mark the steps that are finished and valid: */
.step.finish {
background-color: #04AA6D;
}
</style>
<div id="regForm" class="shadow">
<h3>Registration Form</h3>
<br />
<div class="tab">
<h5>Personal Details</h5>
<br />
<div class="row">
<div class="col">
<div class="mb-3">
<asp:TextBox runat="server" type="text" class="form-control" placeholder="Full Name"></asp:TextBox>
</div>
<div class="mb-3">
<asp:TextBox runat="server" type="text" class="form-control" placeholder="Surename"></asp:TextBox>
</div>
<div class="mb-3">
<asp:TextBox runat="server" type="date" class="form-control" placeholder="Date of Birth"></asp:TextBox>
</div>
<div class="mb-3">
<asp:DropDownList runat="server" class="form-control">
<asp:ListItem Value="" Selected hidden>Civil Status</asp:ListItem>
<asp:ListItem Value="CV1">Single</asp:ListItem>
<asp:ListItem Value="CV2">Married</asp:ListItem>
<asp:ListItem Value="CV3">Widowed</asp:ListItem>
<asp:ListItem Value="CV4">Divorced</asp:ListItem>
<asp:ListItem Value="CV5">Separated</asp:ListItem>
</asp:DropDownList>
</div>
<div class="mb-3">
<asp:TextBox runat="server" type="text" class="form-control" placeholder="Land Phone"></asp:TextBox>
</div>
<div class="mb-3">
<asp:TextBox runat="server" type="texxt" class="form-control" placeholder="Address" TextMode="MultiLine"></asp:TextBox>
</div>
<div class="mb-3">
<asp:TextBox runat="server" type="text" class="form-control" placeholder="E-mail"></asp:TextBox>
</div>
</div>
<div class="col">
<div class="mb-3">
<asp:TextBox runat="server" type="text" class="form-control" placeholder="Other Name"></asp:TextBox>
</div>
<div class="mb-3">
<asp:TextBox runat="server" type="text" class="form-control" placeholder="NIC"></asp:TextBox>
</div>
<div class="mb-3">
<asp:DropDownList runat="server" class="form-control">
<asp:ListItem Value="" Selected hidden>Gender</asp:ListItem>
<asp:ListItem Value="G1">Male</asp:ListItem>
<asp:ListItem Value="G0">Female</asp:ListItem>
</asp:DropDownList>
</div>
<div class="mb-3">
<asp:DropDownList runat="server" class="form-control">
<asp:ListItem Value="" Selected hidden>Religion</asp:ListItem>
<asp:ListItem Value="R1">Christianity</asp:ListItem>
<asp:ListItem Value="R2">Hinduism</asp:ListItem>
<asp:ListItem Value="R3">Buddhism</asp:ListItem>
<asp:ListItem Value="R4">Islam</asp:ListItem>
</asp:DropDownList>
</div>
<div class="mb-3">
<asp:TextBox runat="server" type="text" class="form-control" placeholder="Mobile"></asp:TextBox>
</div>
<div class="mb-3">
<asp:DropDownList runat="server" class="form-control">
<asp:ListItem Value="" Selected hidden>District</asp:ListItem>
<asp:ListItem Value="CV1"> Jaffna </asp:ListItem>
<asp:ListItem Value="CV1"> Kilinochchi </asp:ListItem>
<asp:ListItem Value="CV1"> Mannar </asp:ListItem>
<asp:ListItem Value="CV1"> Mullaitivu </asp:ListItem>
<asp:ListItem Value="CV1"> Vavuniya </asp:ListItem>
<asp:ListItem Value="CV1"> Puttalam </asp:ListItem>
<asp:ListItem Value="CV1"> Kurunegala </asp:ListItem>
<asp:ListItem Value="CV1"> Gampaha </asp:ListItem>
<asp:ListItem Value="CV1"> Colombo </asp:ListItem>
<asp:ListItem Value="CV1"> Kalutara </asp:ListItem>
<asp:ListItem Value="CV1"> Anuradhapura </asp:ListItem>
<asp:ListItem Value="CV1"> Polonnaruwa </asp:ListItem>
<asp:ListItem Value="CV1"> Matale </asp:ListItem>
<asp:ListItem Value="CV1"> Kandy </asp:ListItem>
<asp:ListItem Value="CV1"> Nuwara Eliya </asp:ListItem>
<asp:ListItem Value="CV1"> Kegalle </asp:ListItem>
<asp:ListItem Value="CV1"> Ratnapura </asp:ListItem>
<asp:ListItem Value="CV1"> Trincomalee </asp:ListItem>
<asp:ListItem Value="CV1"> Batticaloa </asp:ListItem>
<asp:ListItem Value="CV1"> Ampara </asp:ListItem>
<asp:ListItem Value="CV1"> Badulla </asp:ListItem>
<asp:ListItem Value="CV1"> Monaragala </asp:ListItem>
<asp:ListItem Value="CV1"> Hambantota </asp:ListItem>
<asp:ListItem Value="CV1"> Matara </asp:ListItem>
<asp:ListItem Value="CV1"> Galle </asp:ListItem>
</asp:DropDownList>
</div>
<div class="mb-3">
<asp:TextBox runat="server" type="text" class="form-control" placeholder="Nearest Police Station"></asp:TextBox>
</div>
</div>
</div>
</div>
<div class="tab">
<h5>Educational Qualification </h5>
<br />
<div class="row">
<div class="mb-3">
<asp:DropDownList runat="server" class="form-control">
<asp:ListItem Value="" Selected hidden>Select Highest Education...</asp:ListItem>
<asp:ListItem Value="R1">Grade 8</asp:ListItem>
<asp:ListItem Value="R2">O/L</asp:ListItem>
<asp:ListItem Value="R3">A/L</asp:ListItem>
<asp:ListItem Value="R4">Degree</asp:ListItem>
<asp:ListItem Value="R2">Doctor</asp:ListItem>
<asp:ListItem Value="R3">PHD</asp:ListItem>
<asp:ListItem Value="R4">Not Mentioned</asp:ListItem>
</asp:DropDownList>
</div>
</div>
<br />
<h5>Professional Qualification</h5>
<br />
<div class="row">
<asp:GridView ID="Gridview1" runat="server" ShowFooter="True"
AutoGenerateColumns="False" CssClass="table table-hover" BorderStyle="None">
<Columns>
<asp:TemplateField HeaderText="Institute">
<ItemTemplate>
<asp:TextBox ID="TextBox1" runat="server" class="form-control"></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Qualification">
<ItemTemplate>
<asp:TextBox ID="TextBox2" runat="server" class="form-control"></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Duration">
<ItemTemplate>
<asp:TextBox ID="TextBox3" runat="server" class="form-control"></asp:TextBox>
</ItemTemplate>
<FooterStyle HorizontalAlign="Right" />
<FooterTemplate>
<input id="btnAdd" type="button" style="width: 200px;" class="btn btn-info" value="Add" onclick="addRowToTable(<%= Gridview1.ClientID %>)" />
</FooterTemplate>
</asp:TemplateField>
<asp:CommandField HeaderText="sdfsd" />
</Columns>
</asp:GridView>
<asp:Button runat="server" Text="Button" />
</div>
</div>
<div class="tab">
Birthday:
<p>
<input placeholder="dd" oninput="this.className = ''" name="dd" />
</p>
<p>
<input placeholder="mm" oninput="this.className = ''" name="nn" />
</p>
<p>
<input placeholder="yyyy" oninput="this.className = ''" name="yyyy" />
</p>
</div>
<div class="tab">
Login Info:
<p>
<input placeholder="Username..." oninput="this.className = ''" name="uname" />
</p>
<p>
<input placeholder="Password..." oninput="this.className = ''" name="pword" type="password" />
</p>
</div>
<div style="overflow: auto;">
<div style="float: right;">
<button type="button" id="prevBtn" onclick="nextPrev(-1)" class="btn btn-secondary">Previous</button>
<button type="button" id="nextBtn" onclick="nextPrev(1)" class="btn btn-primary">Next</button>
</div>
</div>
<!-- Circles which indicates the steps of the form: -->
<div style="text-align: center; margin-top: 40px;">
<span class="step"></span>
<span class="step"></span>
<span class="step"></span>
<span class="step"></span>
</div>
</div>
<div style="text-align: center;">
<p class="mt-5 mb-3 text-muted">©2021 SLFEA</p>
<p class="mb-3 text-muted" style="font-size: small;">Designed by Dockyard Total Solutions Pvt Ltd</p>
</div>
<script type="text/javascript">
function addRowToTable(containerId) {
// Get a reference to the table/GridView...
var tableRef = document.getElementById('<%= Gridview1.ClientID %>');
// Get the index of the current last row...
var lastRow = tableRef.rows.length;
// Add a row (<tr>) to the table/GridView...
var newRow = tableRef.insertRow(lastRow - 1);
// Add a cell (<td>) to the row...
var newCell = newRow.insertCell(0);
var newCell1 = newRow.insertCell(1);
var newCell2 = newRow.insertCell(2);
// Create a TextBox...
var controlRef = document.createElement('input');
controlRef.type = 'text';
controlRef.id = containerId + '_TextBox' + lastRow;
controlRef.name = controlRef.id;
controlRef.size = 20;
var controlRef1 = document.createElement('input');
controlRef.type = 'text';
controlRef.id = '01' + '_TextBox' + lastRow;
controlRef.name = controlRef.id;
controlRef.size = 20;
var controlRef2 = document.createElement('input');
controlRef.type = 'text';
controlRef.id = '02' + '_TextBox' + lastRow;
controlRef.name = controlRef.id;
controlRef.size = 20;
// Add the TextBox to the cell...
newCell.appendChild(controlRef);
newCell1.appendChild(controlRef1);
newCell2.appendChild(controlRef2);
}
</script>
