Staying on same Bootstrap tab after form submission

Question

I have some tabs created using Bootstrap 4 as given in sample snippet:

<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
    <li class="nav-item">
        <a class="nav-link active" id="pills-home-tab" data-toggle="pill" 
            href="#pills-home" role="tab" aria-controls="pills-home" aria- 
            selected="true">Home</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" id="pills-profile-tab" data-toggle="pill" 
            href="#pills-profile" role="tab" aria-controls="pills-profile" aria- 
            selected="false">Profile</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" id="pills-contact-tab" data-toggle="pill" 
        href="#pills-contact" role="tab" aria-controls="pills-contact" aria- 
        selected="false">Contact</a>
    </li>
</ul>
<div class="tab-content" id="pills-tabContent">
    <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria- 
        labelledby="pills-home-tab">...</div>
    <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria- 
        labelledby="pills-profile-tab">...</div>
    <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria- 
        labelledby="pills-contact-tab">...</div>
</div>

In one of the tabs, I have a form to be submitted using PHP. However, After the form submission, I am unable to stay in the same tab. How to solve this?

Answer 1

Pass some tab-specific parameter with the url(GET) or POST,retrieve it and show whichever you want to.

For example: Lets assume: For tab1: tabid=1,for tab2:tabid=2 and tab3: tabid=3.

<?php if (isset($_GET['tabid)) $tabid=$_GET['tabid']; else $tabid=0;
?>
<div class="tab-content" id="pills-tabContent">
<div class="tab-pane fade <?php if($tabid==1) echo 'show active';?>" id="pills-home" role="tabpanel" aria- 
labelledby="pills-home-tab">...</div>
<div class="tab-pane fade <?php if($tabid==1) echo 'show active';?>" id="pills-profile" role="tabpanel" aria- 
labelledby="pills-profile-tab">...</div>
<div class="tab-pane fade <?php if($tabid==1) echo 'show active';?>" id="pills-contact" role="tabpanel" aria- 
labelledby="pills-contact-tab">...</div>
</div>

While submitting, assuming you have different forms, you can use a hidden input type, to send parameter for identifying, which tab's form was submitted.

Answer 2

One method is : When you are reloading the page after form submission you need to send the tab id as query param.

Add the class active to the corresponding tab.

It will be something like this

URL : website.com?tabid=pills-home

<?php 
$tabId = isset($_GET['tabid']) ?$_GET['tabid'] : "";
?>

<div class="tab-pane fade show <?php if($tabId=="pills-home") echo("active"); ?>" id="pills-home" role="tabpanel" aria- 
labelledby="pills-home-tab">...</div>

Answer 3

It is advised that you send form data via AJAX.

But, coming back to your problem.

If you are submitting the form via PHP, url will change.

Add to your form's action:

<form action="your-php-file.php?tab=pills-contact" method="post">

Now, after form submit, get $_GET['tab']

$homeTabActive = ! empty($_GET['tab']) && $_GET['tab'] == 'pills-home' ? $_GET['tab'] : 'pills-home'

In your tabs, set active to the respective tab.

Like this:

<div class="tab-content" id="pills-tabContent">
    <div class="tab-pane fade show <?php echo $homeTabActive;?>" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">...</div>

Do the same for all tabs.