Member Avatar for Sophia_1 
  Hi everyone, i have this form with 2 divisions. I wanted to retain the current tab after saving records for example, after saving records in tab-2, the tab-2 suppose to appear/retain as current tab. Currently, after clicking submit button the tab will go back to tab-1. Please advise. Thanks.

  <form name="ipdprogress" id="ipdprogress" method="post" action=""> 
        <div id="tabs">
            <ul>
                <li><a href="#tabs-1" >Quarter 1</a></li>
                <li><a href="#tabs-2">Quarter 2</a></li>
            </ul>
    <div id="tabs-1">  
    <?php
    session_start(); 
    error_reporting(E_ALL ^ E_NOTICE);
    $con = mysql_connect("localhost","user","");
    if (!$con){
    die("Can not connect: " . mysql_error());
    }
    mysql_select_db("p",$con);

    $Picid=$_GET['Picid'];
    $result = mysql_query("SELECT * FROM progress WHERE  Picid='" . $Picid . "' ");
    $row= mysql_fetch_array($result); 


    $Picid = $_GET['Picid'];
    $nwQty = "SELECT * FROM progress WHERE Picid = '$Picid'";
    $solution = mysql_query($nwQty);
     if(isset($_POST['submit'])){
    if (mysql_num_rows($solution) == 0){

        $sql = "INSERT INTO progress(T11,Selfrating1,Picid) VALUES ('" . $_POST["T11"] . "','" . $_POST["Selfrating1"] . "','" . $Picid . "')"; 
        $result = mysql_query($sql);
    } 
    else {

        $sql =("UPDATE progress SET T11='" . $_POST["T11"] . "',  Selfrating1='" . $_POST["Selfrating1"] . "' WHERE Picid='" . $Picid . "'");
        $result = mysql_query($sql);
        echo('Record Updated');
    }
    $result = mysql_query("SELECT * FROM progress WHERE  Picid='" . $Picid . "' ");
    $row= mysql_fetch_array($result); 
     }
    ?>
    <p><b>1.Target</b></p>
    <script>
    function ocalculateText(el) {
      var form = el.form;
      var idx = form.Selfrating1.selectedIndex;
      if (idx <= 0) {
        form.reset();
        return;
      }
      if (form.Selfrating1.value == "Good") {
         form.T11.value = "#008000";
      } else if (form.Selfrating1.value == "Satisfactory") {
        form.T11.value = "#9ACD32";
        }
      }
    </script>
    <p>a.i.Self Rating(1st Rating): <select name="Selfrating1" id="Selfrating1" onchange="ocalculateText(this)" value="<?php echo $row['Selfrating1']; ?>" > 
                    <option selected>Please select an option</option>                           
                    <option value=Good <?php if($row['Selfrating1']=='Good') { echo "selected"; }?>>Good</option>
                    <option value=Satisfactory <?php if($row['Selfrating1']=='Satisfactory') { echo "selected"; }?>>Satisfactory</option>
                    </select>
                <input type="color" name="T11" id="T11" onchange="ocalculateText(this)" value="<?php echo $row['T11'];?>"></p>  

            <input type="hidden" name="Picid" id="Picid" value="<?php echo $row['Picid']; ?>" > 
            <input type="hidden" name="Progressid" id="Progressid" value="<?php echo $row['Progressid']; ?>"> 
            <td colspan="2"><input type="submit" name="submit" value="Save" class="btnSubmit"></td>    
     <?php
    mysql_close($con);  
    ?>      
    </div>
    <div id="tabs-2">  
    <?php
    session_start(); 
    error_reporting(E_ALL ^ E_NOTICE);
    $con = mysql_connect("localhost","user","");
    if (!$con){
    die("Can not connect: " . mysql_error());
    }
    mysql_select_db("p",$con);

    $Picid=$_GET['Picid'];
    $result = mysql_query("SELECT * FROM progress WHERE  Picid='" . $Picid . "' ");
    $row= mysql_fetch_array($result); 


    $Picid = $_GET['Picid'];
    $nwQty = "SELECT * FROM progress WHERE Picid = '$Picid'";
    $solution = mysql_query($nwQty);
     if(isset($_POST['submit'])){
    if (mysql_num_rows($solution) == 0){

        $sql = "INSERT INTO progress(T12,Selfrating2,Picid) VALUES ('" . $_POST["T12"] . "','" . $_POST["Selfrating2"] . "','" . $Picid . "')"; 
        $result = mysql_query($sql);
    } 
    else {

        $sql =("UPDATE progress SET T12='" . $_POST["T12"] . "',  Selfrating2='" . $_POST["Selfrating2"] . "' WHERE Picid='" . $Picid . "'");
        $result = mysql_query($sql);
        echo('Record Updated');
    }
    $result = mysql_query("SELECT * FROM progress WHERE  Picid='" . $Picid . "' ");
    $row= mysql_fetch_array($result); 
     }
    ?>
    <p><b>1.Target</b></p>
    <script>
    function ocalculateText(el) {
      var form = el.form;
      var idx = form.Selfrating2.selectedIndex;
      if (idx <= 0) {
        form.reset();
        return;
      }
      if (form.Selfrating2.value == "Good") {
         form.T12.value = "#008000";
      } else if (form.Selfrating2.value == "Satisfactory") {
        form.T12.value = "#9ACD32";
        }
      }
    </script>
    <p>a.i.Self Rating(1st Rating): <select name="Selfrating2" id="Selfrating2" onchange="ocalculateText(this)" value="<?php echo $row['Selfrating2']; ?>" > 
                    <option selected>Please select an option</option>                           
                    <option value=Good <?php if($row['Selfrating2']=='Good') { echo "selected"; }?>>Good</option>
                    <option value=Satisfactory <?php if($row['Selfrating2']=='Satisfactory') { echo "selected"; }?>>Satisfactory</option>
                    </select>
                <input type="color" name="T12" id="T12" onchange="ocalculateText(this)" value="<?php echo $row['T12'];?>"></p>  

            <input type="hidden" name="Picid" id="Picid" value="<?php echo $row['Picid']; ?>" > 
            <input type="hidden" name="Progressid" id="Progressid" value="<?php echo $row['Progressid']; ?>"> 
            <td colspan="2"><input type="submit" name="submit" value="Save" class="btnSubmit"></td>    
     <?php
    mysql_close($con);  
    ?>      
    </div>
    </form>
  • 2 Contributors
  • 1 Reply
  • 403 Views
  • 8 Minutes Discussion Span
  • Latest Post Latest Post by andrevanzuydam

Dani AI

Generated

Short answer for : the page reload is returning you to tab‑1 because no tab state is preserved across the submit. There are three robust approaches — client-only (store the active tab in sessionStorage or the hash), server-side (submit which tab was active or redirect with ?tab=2), or use your tabs library API to set the active index on load. ’s hidden‑field idea is valid, but their sample has a couple of logic/case bugs; if you go server-side, centralize the POST handling (do processing once at the top of the page) and then redirect back with a tab indicator.

Client-side quick fix (no PHP changes required)

// save/restore a tab id using sessionStorage
document.addEventListener('DOMContentLoaded', function(){
  var tabs = document.querySelectorAll('#tabs ul li a');
  tabs.forEach(function(a){ a.addEventListener('click', function(){ sessionStorage.setItem('ipd_activeTab', this.getAttribute('href')); }); });
  var saved = sessionStorage.getItem('ipd_activeTab');
  if (saved) {
    var link = document.querySelector('#tabs a[href="'+saved+'"]');
    if (link && typeof link.click === 'function') link.click();
    else location.hash = saved;
  }
  var form = document.getElementById('ipdprogress');
  if (form) form.addEventListener('submit', function(){ history.replaceState(null,null, sessionStorage.getItem('ipd_activeTab') || '#tabs-1'); });
});

Server-side pattern (more explicit): on POST process the data, then redirect to the same URL with a query param (for example ?tab=2). On page load use that param to set the active tab. This avoids losing the tab when you use header() redirects.

Short troubleshooting checklist

  • Move session_start() and DB connect to the top once; don’t duplicate in each tab panel.
  • Avoid mysql_* — use mysqli or PDO with prepared statements to prevent injection.
  • Give submit buttons distinct names/values or set a hidden activeTab on click so the server knows which panel was saved.
  • Don’t name controls submit (it can shadow form.submit in JS).
  • If you use jQuery UI, call its API to set the active index on load instead of simulating clicks.

Any of these will solve the “back to tab‑1” behavior; pick client-side for fastest change, server-side if you prefer explicit post/redirect handling.

Member Avatar for andrevanzuydam

I would modify these lines here, you have a couple of options, set a request param on the anchor of TAB 2, or a hidden input to indicate which tab was clicked, you would need some PHP code to set which tab is active, so you need an "active" style for that as well. I would not recommend this method for long term maintenance but for your code snippet this should be fairly simple. I have not tested the code, but you should get the concept

            <?php
              $tab1Active = "";
              $tab2Active = "";
              if (empty($_REQUEST["whichTab"])) $_REQUEST["whichTab"] = 1;
              if (!empty($_REQUEST["whichTab"]) && $_REQUEST["whichTAB"] == 2) {
                  $tab2Active = 'class="active"';
              }
                else {
                  $tab2Active = 'class="active"';
              }  
            ?>
            <ul>
                <input type="hidden" name="whichTab" id="whichTab" value="{$_REQUEST["whichTab"]}">
                <li><a {$tab1Active} href="#tabs-1" onclick="document.getElementById('whichTab').value = 1;" >Quarter 1</a></li>
                <li><a {$tab2Active} href="#tabs-2" onclick="document.getElementById('whichTab').value = 2;">Quarter 2</a></li>
            </ul>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.