CODEWITHSUNDEEP
javascripthtmlforms
user1419810
user1419810

Reputation: 846

Open tab in form with javascript on submit

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?

Upvotes: 0

Views: 1107

Answers (2)

Stavros Angelis
Stavros Angelis

Reputation: 962

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.

Upvotes: 1

heylookltsme
heylookltsme

Reputation: 124

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').

Upvotes: 0

Related Questions