Selecting previous tab after form submission

I have a user area that uses jQuery tabs as its main navigation method, but when submitting forms (especially when uploading images) the user is redirected to the first tab. Is there a way that I can have them return to the tab they left to submit the data?

Code I’m using to redirect profile data updates;

// Redirect to previous page
header('Location: ' . $_SERVER['HTTP_REFERER']);

Code i’m using to redirect after image upload;

		alert('Your photo was uploaded.');
        window.location.href='<?php echo $_SERVER['HTTP_REFERER']; ?>?success';

		alert('There was an error while uploading your photo... Please try again.');
        window.location.href='<?php echo $_SERVER['HTTP_REFERER']; ?>?fail';

The tabs (toggles between divs with the class of pages and the ID’s below (mainphoto etc);

<div class="profile-nav">
<ul id="profile-navigation">
  <li class="active" style="font-size: 14px;"><a href="#mainphoto">Main Photo</a></li>
  <li style="font-size: 14px;"><a href="#galleryphotos">Gallery Photos</a></li>
  <li style="font-size: 14px;"><a href="#albums">Albums</a></li>

Just in case its needed - the JS for the tabs;

<!-- MINI TAB NAVIGATION JS (profiles, search, listing pages etc) -->
<script type="text/javascript">

    function contentSwitcher(settings){
        var settings = {
           contentClass : '.pages',
           navigationId : '#profile-navigation'

        //Hide all of the content except the first one on the nav

        //onClick set the active state, 
        //hide the content panels and show the correct one
            var contentToShow = $(this).attr('href');
            contentToShow = $(contentToShow);
            //dissable normal link behaviour

            //set the proper active class for active state css

            //hide the old content and show the new

Hi @benyates1, when you click on a tab, does the URL change?

1 Like

It does, it adds #tabname to the end of the URL but I have tried using that already - in fact it is included when using the document referrer - but no look, it still returns the user to the first/default tab.

Maybe upon landing on the page you could check the URL anchor and simulate a click on the appropriate tab…

Yes, that may work but I’m not sure how to write something like that.

Hi @benyates1, try this:

function fireEvent (node, event)
	if(!(node instanceof HTMLElement)) {
		console.error("could not fire event, expecting a dom node and got:", node);
	if (document.createEventObject) {
		// dispatch for IE
		var evt = document.createEventObject();
		return node.fireEvent('on' + event, evt)
	else {
		// dispatch for firefox + others
		var evt = document.createEvent("HTMLEvents");
		evt.initEvent(event, true, true); // event type,bubbling,cancelable
		return !node.dispatchEvent(evt);

window.addEventListener("load", function(){
	var hash = window.location.hash;
	if (hash !== "") {
		var id = hash.replace("#", "");
		var node = document.getElementById(id);
		if (node) {
			fireEvent(node, "click");
1 Like


As the OP is using jQuery, this can probably be shortened somewhat:

var hash = window.location.hash;
if (hash !== "") $(hash).trigger("click");

Make sure this is placed at the foot of the document, or in a $(document).ready() callback, and you’re good to go.


Thanks for the help here @James_Hibbard and @Andres_Vaquero. Works perfectly.

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.