Click here to Skip to main content
15,664,272 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
How to keep the current tab in .aspx page after page submitting. When clicking the add button in tab, after the page postback again diplayed tab1. I want to display same tab my code as follows..


  <div class="tab" id="tab2">   <h5>Educational Qualification </h5> <br />
     <form method="POST" action="tab2">
<div class="row">
    <div class="mb-3"><asp:dropdownlist runat="server"  class="form-control">
    <asp:ListItem Value=""  selected hidden>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>
      <br />
        <h5>Professional Qualification</h5>
      <br />
<div class="row">
    <div class="col">
        <div class="mb-3"><asp:textbox runat="server" type="text" class="form-control"  placeholder="Institute" ID="txtInstitue"></asp:textbox></div>

    <div class="col">
        <div class="mb-3"><asp:textbox runat="server" type="text" class="form-control" ID="txtQualification"  placeholder="Qualification"></asp:textbox></div>

    <div class="col">
        <div class="mb-3"><asp:textbox runat="server" type="text" class="form-control" ID="txtDuration"  placeholder="Duration"></asp:textbox></div>

     <div class="col">
         <asp:button runat="server" text="Add"  class="btn btn-primary" ID="btnAdd" OnClick="btnAdd_Click" />
      <br />
      <asp:gridview runat="server" ID="grdProfessionalDetails"></asp:gridview>


  <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 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 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>
  <!-- Circles which indicates the steps of the form: -->
  <div style="text-align:center;margin-top:40px;">
    <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>

var currentTab = 0; // Current tab is set to be the first tab (0)
showTab(currentTab); // 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 will display the correct step indicator:

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[currentTab].style.display = "none";
  // Increase or decrease the current tab by 1:
  currentTab = currentTab + n;
  // if you have reached the end of the form...
  if (currentTab >= x.length) {
    // ... the form gets submitted:
    return false;
  // Otherwise, display the correct tab:

function validateForm() {
  // This function deals with validation of the form fields
  var x, y, i, valid = true;
  x = document.getElementsByClassName("tab");
  y = x[currentTab].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")[currentTab].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 on the current step:
  x[n].className += " active";

What I have tried:

I tried to add action attribute in each form tags to call tab. but doesn't work
Updated 10-May-21 2:31am

1 solution

var currentTab = 0; // Current tab is set to be the first tab (0)
showTab(currentTab); // Display the current tab

In every postback event or page refresh your JS Function "ShowTab(currrentTab)" is called. Since you have set the curentTab to 0. So every POSTBACK AND PAGE SUBMITS sets your tab to the default one not the curernt one.

So why don't you use the hidden field to set the current tab.

I hope you are clear why your tab always set to default not the current one.
Share this answer
Member 14615544 16-May-21 10:00am    
how to set current tab to default one. Please help me. Am new to the JS
Divya Srivastava 16-May-21 14:43pm    
1. You can use hidden field to set the current tab value .
<asp:hiddenfield id="hdnCurrentTab" value="0" runat="server">
2. To get the hiddenfield value in Js
var currentTab = document.getElementById('hdnCurrentTab').value;
3. You need to set the Hiddenfield value in JS Function (wherever you are changing
the currentTab Variable )
This is all about hiddenField to Set and Get in the JS. This will solve your problem to
set the current tab in the postback event.

Some important points to understand related to Hidden Field in C#.
1. Hidden Field is a form control. Form Control value is maintained by doing POST.
As long AS the control is created in the page life cycle,the Posted value will be set
on the control.
2. But If you refresh the page or click on a hyperlink does a GET,
then the value will be lost or revert to the designer-generated(aspx page) default.

Hope you got the answer.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900