How to prevent after submitting a form to revert back to the previous Tab

Question

I have several tabs and each time I select a tab, the form is submitted sending a variable a different value (hidden from the user). If I go say from TAB1 to TAB2, variable99 will get a value of 2, TAB3 a value of 3 and so on.... Problem I am having is that when I select TAB2, I don't want the page to revert back to TAB1. Here is my code:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Submit a Form on Tab Click</title>

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>


<style type="text/css">
</style>

<script>
$(function() {
$("#Main").tabs();
$('[id^=ui-id-]').click(function(){
var tabId = $(this).attr('id');
var tabNum = tabId.split('-')[2];
$('#form-' + tabNum).submit();
});
});
</script>


</head>

<body>



<div id="Main">
<ul>
<li><a href="#Tab1">Tab1</a></li>
<li><a href="#Tab2">Tab2</a></li>
<li><a href="#Tab3">Tab3</a></li>
<li><a href="#Tab4">Tab4</a></li>
<li><a href="#Tab5">Tab5</a></li>
<li><a href="#Tab6">Tab6</a></li>
</ul>

<form id="form-1" action="Tab_Click_v00.html" method="post">
<input type="hidden" name="Nb_var99" value="1">
</form>   

<form id="form-2" action="Tab_Click_v00.html" method="post">
<input type="hidden" name="Nb_var99" value="2">
</form> 

<form id="form-3" action="Tab_Click_v00.html" method="post">
<input type="hidden" name="Nb_var99" value="3">
</form>

<form id="form-4" action="Tab_Click_v00.html" method="post">
<input type="hidden" name="Nb_var99" value="4">
</form>

<form id="form-5" action="Tab_Click_v00.html" method="post">
<input type="hidden" name="Nb_var99" value="5">
</form>

<form id="form-6" action="Tab_Click_v00.html" method="post">
<input type="hidden" name="Nb_var99" value="6">
</form>

<div id="Tab1">
<p>Tab1</p> 
</div>
<div id="Tab2">
<p>Tab2</p>
</div>
<div id="Tab3">
<p>Tab3</p>
</div>
<div id="Tab4">
<p>Tab4</p>
</div>
<div id="Tab5">
<p>Tab5</p>
</div>
<div id="Tab6">
<p>Tab6</p>
</div>
</div>


</body>
</html>

Here is my code now, I removed some things, that didn't make since:

<!DOCTYPE html>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Submit a Form on Tab Click</title>

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>


<style type="text/css">
</style>

<script>
$(function() {//Open function
$("#Main").tabs();
$('[id^=ui-id-]').click(function(){ //Open [id^=ui-id-]

       if (tabId == 'ui-id-1')
     {
        doAjax('1');
        }
    else if (tabId == 'ui-id-2') 
     {
      doAjax('2');
     }
    else if (tabId == 'ui-id-3') 
     {
      doAjax('3');
     }
function doAjaxSubmit(formID) { //Open doAjaxSubmin
$.ajax({
    type: "POST",
    url: "Tab_Click_v00.html",
    data: "Nb_var99=" + formID,
})
} //Close doAjaxSubmin
}); //Close [id^=ui-id-]
});//Close function
</script>


</head>

<body>



<div id="Main">
<ul>
<li><a href="#Tab1">Tab1</a></li>
<li><a href="#Tab2">Tab2</a></li>
<li><a href="#Tab3">Tab3</a></li>
<li><a href="#Tab4">Tab4</a></li>
<li><a href="#Tab5">Tab5</a></li>
<li><a href="#Tab6">Tab6</a></li>
</ul>



 <div id="Tab1">
 <p>Tab1</p> 
 </div>
 <div id="Tab2">
 <p>Tab2</p>
 </div>
 <div id="Tab3">
 <p>Tab3</p>
 </div>
 <div id="Tab4">
 <p>Tab4</p>
 </div>
 <div id="Tab5">
 <p>Tab5</p>
 </div>
 <div id="Tab6">
 <p>Tab6</p>
 </div>
 </div>


</body>
</html>

This is not working. It also killed the css style?? I'll keep on trying.

Would you mind editing your question and telling us a bit about what happens to the Nb_var99 data when it reaches Tab_Click_v00.html? Is there something for the user to do there (that is, does the user even need to see that page?), or what happens to the data (Nb_var99==3, Nb_var99==4, etc) once it reaches that HTML file? Also, does your server do PHP or ASP.NET or ? (in case we need to add a bit of server-side code to finish the answer?) — cssyphus
Also, after POSTING the Nb_var99 value over to Tab_Click_v00.html, do you want to update the current page at all - perhaps with a success message, or by displaying data sent back by the Tab_Click page (for this we would need to know the PHP/ASP.NET question... It's super simple to do, we just have to know.) — cssyphus
Hi gibberish, Nb_var99 is a variable contained in an embedded webserver (this webserver doesn't do or at least I am not aware of that it runs PHP or ASP.NET). As far as I know, it runs a software called PINK (developed by Netburner). Unfortunately, the way to load a value to its variables is to perform a post on a form. Their is no need to alert the user of this action, another embedded unit will collect this information as reference to know where the user is currently at. — Neil Porven
Thanks for this insight - really helps. In this case, I believe that AJAX is the way to go. No need for the .done() function (or, in the old style AJAX, no need for a success: function). Just use AJAX to post the data, and you should be golden. — cssyphus
If I use form post and the url is: Tab_Click_v00.html#tab1 and I do the following: <form id="form-1" action="Tab_Click_v00.html#tab1" method="post"> then it should work? — Neil Porven

cssyphus cssyphus · Accepted Answer · 2013-09-23T21:31:16

For what you want to do, there is no need to use <form>s and <input>s at all.

Just based on the tab that is clicked, you can send a 1 or a 2 or a 3 over to the desired HTML page, via AJAX.

The <form> construction is great when you have several fields and you wish to POST their data over to another server page for processing. However, in your case, it appears that you only wish to send a value to another page, and then return.

Here is one way to do it, using AJAX:

$(document).ready(function() {
    $( "#Main" ).tabs();

    $('[id^=ui-id-]').click(function() {

        if (tabId == 'ui-id-1') {
            doAjax('1');
        }else if (tabId == 'ui-id-2') {
            doAjax('2');
        }else if (tabId == 'ui-id-3') {
            doAjax('3');
        }

    }); //END ui-id-#.click fn
}); //END document.ready

function doAjaxSubmit(formID) {
    $.ajax({
        type: "POST",
        url: "myphpprocessor.php",
        data: "Nb_var99=" + formID,
    })
    .done(function( recd_from_PHP ) {
        //No need to put ANYTHING in here, but for eg, you can do:

        //AS AN EXAMPLE ONLY, display message sent from server side
        alert("PHP side said: " + recd_from_PHP);

        //AS AN EXAMPLE ONLY, click the third tab...
        $('[id^=ui-id-3]').click();
    });

}

Another way to send form data (using a <form> as it was intended) is to create a hidden <iframe> on your page, containing the Tab_Click_v00.html page inside it -- and then POST to that page.

Because the form's target is already on the page in an <iframe>, the current page should not refesh. And because the <iframe> is hidden, the user should not see anything unusual.

How to prevent after submitting a form to revert back to the previous Tab

4 Answers