Open tab in form with javascript on submit

Question

I have a really simple example of a form that's split into tabs that it is posted onto itself for verification and processing with php, simplified version of code is as below (without the verification and processing steps):

<style>
/* Style the list */
ul.tab {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
}

/* Float the list items side by side */
ul.tab li {float: left;}

/* Style the links inside the list items */
ul.tab li a {
    color: black;
    display: inline-block;
    font-size: 15px;
    font-weight: lighter;
    padding: 14px 16px;
    text-align: center;
    text-decoration: none;
    transition: all 0.3s ease 0s;
}

/* Change background color of links on hover */
ul.tab li a:hover {background-color: #ddd;}

/* Create an active/current tablink class */
ul.tab li a:focus, .active {background-color: #ccc;}

/* Style the tab content */
.tabcontent {
    display: none;
    padding: 60px 10px;
    border: 1px solid #ccc;
    border-top: none;
    margin-bottom: 20px;
}
</style>

<ul class="tab">
<li><a href="#" class="tablinks" onclick="openTab(event, 'tab_1')">tab 1</a></li>
<li><a href="#" class="tablinks" onclick="openTab(event, 'tab_2')">tab 2</a></li>
</ul>

<!-- FORM Starts -->
<form method="POST" action="">
<div id="tab_1" class="tabcontent">
Tab One Content
</div>

<div id="tab_2" class="tabcontent">
Tab Two Content
</div>

<input type="submit" name="save_settings_button" value="Save Settings" />
</form>

<script>
function openTab(evt, tabName) {
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tabcontent.length; i++) {
        tablinks[i].classList.remove("active");
    }
    document.getElementById(tabName).style.display = "block";
    evt.currentTarget.classList.add("active");
}

var mybtn = document.getElementsByClassName("tablinks")[0];
mybtn.click();
</script>

This helps to break up big forms into sections however if a user in on tab 2 and presses the submit button they are taken back to tab one, not a very good user experience!

Is there any way to use javascript to recognize which tab is in focus when the form is submitted and then reload the page on that tab once the page is reloaded?

Stavros Angelis · Accepted Answer · 2017-04-21 12:30:05Z

Since you are process everything with php after you submit your form the only way to know the active tab after the page refresh is to add a custom field in your form and update it whenever you change tab.

so in your html

<input type="hidden" id="active_tab" name="active_tab" value="tab_1" />

Then you should edit your openTab function to update this input when it's called.

document.getElementById("active_tab").value = tabName;

Now in php, when loading your page you add a new variable to capture the active tab and update the active class to your tab.

$active_tab = $_POST['active_tab'];
$active_tab1 = "";
$active_tab2 = "";
if ($active_tab ==="tab_1") $active_tab1 = "active";
if ($active_tab ==="tab_2") $active_tab2 = "active";

Then last update your tabs to make use of the active class.

<div id="tab_1" class="tabcontent <?php echo $active_tab1; ?>">...</div>
div id="tab_2" class="tabcontent <?php echo $active_tab2; ?>">...</div>

This is not the optimal way to go though, for a better user experience I would change all the form submits to ajax calls and process everything in external php files.

heylookltsme · Accepted Answer · 2017-04-21 12:19:45Z

0

I would check for the presence of the active class to determine which tab is currently active. e.g., something like tablink.classList.contains('active').

answered Apr 21, 2017 at 12:19

heylookltsme

1246 bronze badges

Collectives™ on Stack Overflow

Open tab in form with javascript on submit

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related