Question

i have a simple jquery tab and a form. When i post the form the page refreshes and it goes to the default tab. you can see the code in jsfiddle also here:

<ul class="tabs">
<li><a href="#tab1">Home</a> | </li>
<li> | <a href="#tab2">Top 10</a> | </li>
</ul>

<div id="tab1" class="tab_content">234</div>
<div id="tab2" class="tab_content">
<form method="post"> 
<select name="item"> 
<option>Paint</option><option>Brushes</option>
</select>
Quantity: <input name="quantity" type="text" /> 
<input type="submit" />
</form>
</div>

 //When page loads...
$(".tab_content").hide(); //Hide all content
$("ul.tabs li:first").addClass("active").show(); //Activate first tab
$(".tab_content:first").show(); //Show first tab content

//On Click Event
$("ul.tabs li").click(function() {
    $('ul.tabs li#none').removeClass('visible');
    $('ul.tabs li#none').addClass('none');
    $("ul.tabs li").removeClass("active"); //Remove any "active" class
    $(this).addClass("active"); //Add "active" class to selected tab
    $(".tab_content").hide(); //Hide all tab content

    var activeTab = $(this).find("a").attr("href"); 
    $(activeTab).fadeIn(); //Fade in the active ID content
    return false;
});

so again, what i want to accomplish is when i submit a form to redirect back to the tab of my choice.

any ideas?

thanks

Answer 1

A simple idea: add a hidden input field to the form (for reference) and then, in the part of the javascript code, after the tab code, something like:

<?php if(isset($_POST['thehiddenfield'])) { ?>
$('a#tabtoshow').trigger('click'); //here, select by ID the tab you need to show
<?php } ?>

That should do the trick, sorry i dont have time to write the full exact code. I hope it helps.