CODEWITHSUNDEEP
javascriptjqueryhtml
Neil Porven
Neil Porven

Reputation: 83

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

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.

Upvotes: 2

Views: 1769

Answers (4)

cssyphus
cssyphus

Reputation: 40106

This answer also uses AJAX. I will post another example, addressing your request for more information regarding the hidden iframe idea.

Notice that as you click from Tab to Tab, the user remains on the tab.

Just copy/paste into two files:

index.php (or whatever you wish to name it), and
myphpprocessor.php (if change name of this file, must also change its name in AJAX code block)

index.php (or mytest.html, or whatever)

<html>
<head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />

    <style>
        #msg{width:30%;height:80px;padding:10px;margin-top:20px;background-color:wheat;}
        .hidden{display:none;}
    </style>
        
        <script type="text/javascript">
            $(document).ready(function() {
            
                $( "#Main" ).tabs();

                $('[id^=ui-id-]').click(function() {
                    var tabId = $(this).attr('id');

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

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

            function doAjax(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:
                    //alert('In done fn...');

                    //AS AN EXAMPLE ONLY, display message sent from server side
                    //alert("PHP side said: " + recd_from_PHP);
                    $('#msg').html('<h2>Here is what the PHP side sent:</h2>' + recd_from_PHP);

                    //AS AN EXAMPLE ONLY, click the third tab...
                    //$('[id^=ui-id-3]').click(); //Warning, this will cause endless loop -- but just demonstrating
                });

            }
        </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>

    <div id="msg"></div>

</body>
</html>

Server Side: myphpprocessor.php (MUST end in .php)

<?php

    $id = $_POST['Nb_var99'];
    
    if ($id == 4) {
        $msg = "Return of the Tab Four";
    }else{
        $msg = 'PHP side receieved: ' .$id;
    }
    
    echo $msg;

Upvotes: 1

Brad Christie
Brad Christie

Reputation: 101614

Given you're using the jQuery Tabs control, you can use the window.location.hash and bind to the load event (and show the appropriate tab using the active option):

$(window).load(function(){
  if(window.location.hash){
    $('#main').tabs('option','active',window.location.hash.substring(1));
  }
});

Then redirect the user back using somepage.html#tabindex

Upvotes: 1

cssyphus
cssyphus

Reputation: 40106

Posting to a hidden <iframe>

I've never done this myself, and can see its a bit tricky. Here are some posts that discuss how to do it:

How do you post to an iframe?
Hidden iframe submit
Remember to specify the name= attr
Post form in an iframe

You will notice that this is considerably more complicated than simply doing a basic AJAX form submission, as suggested in my previous two answers.

I am not sure why the AJAX solution is not appealing in your situation, but I remember when AJAX and PHP were unknown commodities to me, and perhaps that is what you are struggling with.

If so, struggle no more. Both are much simpler than you realize.

For basic, FREE, from-the-ground-up 10-min tutorials in PHP:
phpAcademy.org
thenewboston.com

Next, here are some good posts for getting the basics of AJAX:

A simple example

More complicated example

Populate dropdown 2 based on selection in dropdown 1

My recommendation is to use the AJAX solution, but I do not understand what you are trying to achieve in the end. What is the file Tab_Click_v00.html going to do with the data it receives?

Perhaps if you provide more information (as a comment below this post) about the desired end result on the Tab_Click side, I can be of more help.

Upvotes: 1

cssyphus
cssyphus

Reputation: 40106

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.

Upvotes: 2

Related Questions