How to return to the same tab after form submit

Question

How can I return to the same tab after I submit a form? The problem is that after I submit a form it's returning to the default tab instead the last tab that I was in.

$(document).ready(function() {
  $(".tabs").not(":first").hide();

  $(".tab .control a").click(function() {
    storage = $(this).attr("href");
    $('.tab').removeClass('active');
    $(this).addClass('active');
    $(".tabs").hide();
    $(storage).show();
  });
});

<a href="#tab1" class="tab">tab1</a>
<a href="#tab2" class="tab">tab2</a>
<a href="#tab3" class="tab">tab3</a>
<a href="#tab4" class="tab">tab4</a>
<a href="#tab5" class="tab">tab5</a>

you could use ajax instead, so there's no refresh. Or you could include the selected tab value as an extra field in the data you send to the server, so that the server can then include that in the data it sends back to the page (e.g. on the querystring), and the page, when it first loads, decides which tab to display based on that. — ADyson, Nov 02 '17 at 10:17
@SilverSurfer thanks for your advice, But is this possible to do in jquery? — JET, Nov 02 '17 at 10:17
https://stackoverflow.com/questions/17880977/html-form-redirect-after-submit sounds like what you're looking for — Dean Coakley, Nov 02 '17 at 10:18
Sure, if you want use jquery and ajax check this post (assuming you are using php on the server): https://stackoverflow.com/questions/5004233/jquery-ajax-post-example-with-php — SilverSurfer, Nov 02 '17 at 10:21
@SilverSurfer AJAX won't help if you want to open `#tab2` when the page loads. — Rory McCrossan, Nov 02 '17 at 10:25

Rory McCrossan · Accepted Answer · 2017-11-02T10:23:03.503

1

You can append the fragment to the URL when redirecting from your server response back to the page, eg:

/yourpage#tab2

You can then retrieve that fragment when the page loads and show the correct tab, something like this:

<a href="#tab1" class="tab">tab1</a>
<a href="#tab2" class="tab">tab2</a>  
<a href="#tab3" class="tab">tab3</a> 
<a href="#tab4" class="tab">tab4</a>
<a href="#tab5" class="tab">tab5</a>

$(document).ready(function() {
  $(".tabs").not(":first").hide();

  $(".tab .control a").click(function() {
    showTab(this.href);
  });

  var tab = window.location.hash;
  if (tab)
    showTab(tab);
});

function showTab(tabId) {
  $('.tab').removeClass('active');
  $('a[href="' + tabId + '"]').addClass('active');
  $(".tabs").hide();
  $(storage).show();
}

edited Nov 02 '17 at 10:23

answered Nov 02 '17 at 10:19

Rory McCrossan

331,213
40
305
339

@ Rory McCrossan okay i will try that :) – JET Nov 02 '17 at 10:21
@ Rory McCrossan should i replace my jquery code with the one you provide? – JET Nov 02 '17 at 11:03
@ Rory McCrossan i already replace my code with the one you provided but when i refresh my browser all the content of each tab has gone – JET Nov 02 '17 at 11:07

score 0 · Answer 2 · answered Nov 02 '17 at 10:23

0

You can set your value on localStorage.

localStorage.content =$(this).attr("href");

After submit get your localStorage value.

 if($('a').attr('href') === localStorage.content)
    $(this).trigger();

answered Nov 02 '17 at 10:23

4b0

21,981
30
95
142

Note that the second part would need to be done in a loop over all the `a` elements – Rory McCrossan Nov 02 '17 at 10:23
@Rory Thanks for comment. – 4b0 Nov 02 '17 at 10:25

How to return to the same tab after form submit

2 Answers2