M.HASSAN M.HASSAN - 3 months ago 12
PHP Question

When I submit the Form it will not return to the same Tab in PHP

I have different tabs in my PHP page. I have each form in every tab. Now I want to submit the form. But when I submit the form it's going to the first Tab. I just want that it will remain on the same Tab from where it submit, but it's never. Please help me,
the code is given below...

<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script type="text/javascript">
$(function(){
$("#tab-container").on("click", ".tab-lbl", function(){
var that = $(this);
var tabid = that.data("tab");

$(".tab").each(function(k, v){
$(this).hide();
});

$(tabid).show();
});
});
</script>
</head>

<body>

<div id="header">
<div class="logo"><a href="#"><span>TAJWEED</span></a></div>
</div>

<div id="container">
<div class="sidebar">
<div id="nav">
<ul id="tab-container">
<li><a href="#" class="selected tab-lbl" data-tab="#tab-dashboard">Dashboard</a></li>
<li><a href="#" class="tab-lbl" data-tab="#tab-menu">Menue</a></li>
<li><a href="#" class="tab-lbl" data-tab="#tab-slider">Slider</a></li>
<li><a href="#" class="tab-lbl" data-tab="#tab-gallery">Gallery</a></li>
<li><a href="#" class="tab-lbl" data-tab="#tab-pictures">Pictures</a></li>

</ul>

</div>

</div>
<div class="content">

<div id="tab-menu" class="tab" style="display: none;">

<?php

$connection = new mysqli('localhost','root','','Tajweed');// Establishing Connection with Server

if(isset($_POST['submitv'])){ // Fetching variables of the form which travels in URL
$name = $_POST['pname'];
$email = $_POST['plink'];


//Insert Query of SQL
$sql=$connection->query("INSERT INTO main_page(pname, plink) values ('$name', '$email')");



}
?>

<form name="myForm" action="admin.php" method="POST" onsubmit=" return validateForm()" >
Page Name: <input placeholder="page name :" name="pname" type="text" />
Page Link: <input type="text" placeholder="Page Link :" name="plink" />
<input type="submit" value="submit" name="submitv">
</form>






</div>
<div id="tab-slider" class="tab" style="display: none;">


<?php

$connection = new mysqli('localhost','root','','Tajweed');// Establishing Connection with Server

if(isset($_POST['submitv'])){ // Fetching variables of the form which travels in URL
$name = $_POST['pname'];
$email = $_POST['plink'];


//Insert Query of SQL
$sql=$connection->query("INSERT INTO main_page(pname, plink) values ('$name', '$email')");



}
?>

<form name="myForm" action="admin.php" method="POST" onsubmit=" return validateForm()" >
Page Name: <input placeholder="page name :" name="pname" type="text" />
Page Link: <input type="text" placeholder="Page Link :" name="plink" />
<input type="submit" value="submit" name="submitv">
</form>






</div>
<div id="tab-gallery" class="tab" style="display: none;"><h1>Gallery</h1></div>
<div id="tab-pictures" class="tab" style="display: none;"><h1>Pictures</h1></div>
</div>

</body>
</html>
</div>

Answer

Add id to links:

<li><a id="tab1" href="#" class="tab-lbl" data-tab="#tab-menu">Menue</a></li>

add new hidden variable to forms:

<form name="myForm" action="admin.php" method="POST" onsubmit=" return validateForm()" >
Page Name: <input  placeholder="page name :" name="pname" type="text"  />
Page Link: <input type="text" placeholder="Page Link :" name="plink" />
<input type="hidden" name="link" value="tab1">
<input type="submit" value="submit"  name="submitv">
</form>

add js code:

<?php if(isset($_POST['link'])): ?>
$(document).ready(function(){
$("#<?php echo $_POST['link']?>").click();
});
<?php endif; ?>

<html>
<head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.js"></script>
    <script type="text/javascript">
        $(function(){
            $("#tab-container").on("click", ".tab-lbl", function(){
                var that = $(this);
                var tabid = that.data("tab");

                $(".tab").each(function(k, v){
                    $(this).hide();
                });

                $(tabid).show();
            });
        });

        <?php if(isset($_POST['link'])): ?>
        $(document).ready(function(){
        $("#<?php echo $_POST['link']?>").click();
        });
        <?php endif; ?>
    </script>
</head>
<body>
<div id="header">
<div class="logo"><a href="#"><span>TAJWEED</span></a></div>
</div>
<div id="container">
<div class="sidebar">
<div id="nav">
<ul id="tab-container">
<li><a href="#" class="selected tab-lbl" data-tab="#tab-dashboard">Dashboard</a></li>
<li><a href="#" id="tab1" class="tab-lbl" data-tab="#tab-menu">Menue</a></li>
<li><a href="#" id="tab2" class="tab-lbl" data-tab="#tab-slider">Slider</a></li>
</ul>
</div>
</div>
<div class="content">
<div id="tab-menu" class="tab" style="display: none;">
<form name="myForm" action="admin.php" method="POST" onsubmit=" return validateForm()" >Form1:
Page Name: <input  placeholder="page name :" name="pname" type="text"  />
Page Link: <input type="text" placeholder="Page Link :" name="plink" />
<input type="hidden" name="link" value="tab1">
<input type="submit" value="submit"  name="submitv">
</form>
</div>
<div id="tab-slider" class="tab" style="display: none;">Form2:
<form name="myForm" action="admin.php" method="POST" onsubmit=" return validateForm()" >
Page Name: <input  placeholder="page name :" name="pname" type="text"  />
Page Link: <input type="text" placeholder="Page Link :" name="plink" />
<input type="hidden" name="link" value="tab2">
<input type="submit" value="submit"  name="submitv">
</form>
</body>
</html>