JQuery Tabbed Nav Menu and PHP Forms Question?

Question

I'm using a JQuery Tabbed Menu which holds different types of forms and when I select a different form located under a different tab and submit the form the tab will jump to the default tab instead of the current tab the form is located in.

I was wondering how would I go about fixing this so that when the form is submitted the current tab is still selected, is it the JQuery or PHP problem?

Here is the JQuery.

$(document).ready(function() {

    //When page loads...
    $(".form-content").hide(); //Hide all content
    var firstMenu = $("#home-menu ul li:first");
    firstMenu.show();
    firstMenu.find("a").addClass("selected-link"); //Activate first tab
    $(".form-content:first").show(); //Show first tab content

    //On Click Event
    $("#home-menu ul li").click(function() {

        $("#home-menu ul li a").removeClass("selected-link"); //Remove any "selected-link" class
        $(this).find("a").addClass("selected-link"); //Add "selected-link" class to selected tab
        $(".form-content").hide(); //Hide all tab content

        var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the selected-link tab + content
        $(activeTab).fadeIn(); //Fade in the selected-link ID content
        return false;
    });

});

Answer 1

It is, that when you Submit a form the page Refresh cause it send data to the server, and javascript keep simply the start position on page Load!

you must do an AJAX call if you want achieve what you want!

you can use also some plugin like this

http://www.mikage.to/jquery/jquery_history.html

IMHO you need to start from scratch with AJAX!

so read this tutorial!

http://php4every1.com/tutorials/jquery-ajax-tutorial/

basically your form look like this:

<form methot="POST" action="yourphppage.php" name="myform" id="myform">
      <input type="text" value="" id="username" />

you need to pass your data to the AJAX by doing something like this!

$('#myform').submit(function() {

var username = $('username').val();

$.ajax({
type: "POST",    
url: "yourphppage.php",    
data: "action=postdata&username=" + username,    
success: function(data){
   // at this point if all is ok you 
//receive data back and you can do other stuff!   
 // data is what you keep back from server (php)    
   $('#your_div_that_hold_ajax_responce').html(data);

}, error: function(data){
 alert('something goes wrong!');    
}   
}); 
});

you php code look like this:

if ( isset( $_POST['action'] ) ) {

switch($_POST['action']) {

case 'postdata':
echo $_POST['username'];
break;

}
}