Tab based form how to post data and view error

[newbie14]

Dear All,
I have implemented a page based on tabs. Now how to submit the data is it just have the submit button on the last tab is it? On the other hand how best to show the error because there might be some fields not fill in the first tab itself and the user might be in the last tab. Thank you.

[Taywin]

I am not sure what you mean by 'tabs'... Does it mean it is on one page with multiple data entry fields?

If you want to screen the input data before submit, you should check it when the form data is being submit using JavaScript. However, if the information is sensitive or it can be tainted, you MUST always check again on your server side because JavaScript is not secure to do the job for you.

[newbie14]

Dear Taywin,
Yes I have one page with multiple data entry fields because if I leave it just one single page it will become too long. I know how to screen the input my problem here is that how best to show the user where the mistake is? Is it that open the first tab which have data not validated is it? Thank you.

[Taywin]

If you could do the page as real 'tab', then you should validate whenever a user finish a tab. The validation on the client side is just for most people who wants to do it. The validation on the server side is to ensure that all data from user are valid. The reason you need the server side as well because there are people who like to craft HTTP request to exploit other people's server if possible.

[newbie14]

Dear Taywin,
I am using third party tab component. So I am afraid they dont have the functionality to check when we move from one tab to another tab whether the previous one have been validated or not? Any other method can you suggest? What method do people use to craft HTTP?

[Taywin]

Hmm... If you do not know how to check the event of the 3rd party program when you move the tab, then what you can do is to verify all data when a user click on 'submit' button. If there is any error, list it and go back to the first tab where the error is found. If you do not know how to go back to the tab where the first error is found, you can just simply go back to the first tab.

There are tools that help you do the crafting in order to test your own server. Though, some people use them with bad intention. Also, the easiest way to create a HTTP request is to directly write it to URL.

Do you know that method POST and GET are handle in very similar way? In other words, the variable values passed by GET are in the URL while the POST are inside its message body. If one just pass the values via GET, it is the same as via POST.

// for example
// On your server side, you expect 'lastname' variable not to be empty or number, and it must
// contain only alphabet.
// You have javascript to check for it and won't let it go through.
<script type="text/javascript">
function noEmptyLastname() {
  var el = document.getElementById("lastname")
  if (el) {
    var val = el.value.replace(/\s+/g, "")
    if (val.length>0 && val.match(/a-z]+/i)==val) { return true }  // has only a-z or A-Z in the field
  }

  return false  // no content or not found the element
}
</script>

// html
// let say the page is http://www.domain_name.com/acceptform
// and this form will go to http://www.domain_name.com/target_page after sending
<form action="target_page" onsubmit="return noEmptyLastname()" method=post>
  <input type="text" id="lastname" name="lastname">
  <input type="submit" value="Go">
</form>

From the sample above, what do you expect to see if you attempt to just click 'Go' button without entering lastname or even just put white spaces in there? Because the form is checked before it is being submit and would get a 'false', you should still see the form page, right?

Now, try this URL on it...

http://www.domainname.com/target_page?lastname=555

The URL is valid and your server side will accept it if you do not check for the incoming value. That's why you should always check on your server side regardless you have done it on client side.

[newbie14]

Dear Taywin,
I have been playing with tabs now trying to open and close.Below is my javascript. I dont know what is wrong in my code it just refuse to hide and show the divs accordingly.

function showTab(_id) 
{

    var tabID=_id;  
    //document.getElementById("dp").style.display="none";
    //document.getElementById("dd").style.display="none";           
    //document.getElementById(_id).style.display="block";
  alert("tab id : "+tabID);

    if(tabID=="dp")
    {
        alert("DP : "+tabID);
        //document.getElementById(tabID).style.display = 'block'; 
        document.getElementById("dp").style.display = "block"; 
        document.getElementById("dd").style.display = "none";
    }
    else
    {
        alert("DD : "+tabID);
        document.getElementById("dp").style.display = "none"; 
        document.getElementById("dd").style.display = "block";
    }
}

This the form

<form action="<?=$_SERVER['PHP_SELF']?>" method="post" name="form1" enctype="multipart/form-data" id=form1 onSubmit="return validateForm();">
<div id="main">
<div id="dp" style="display: none">

    <table>

        <tr>
            <td>             
              <label class="description">Client Name<font color="red">*</font></label>
            </td>
            <td>
              <?php
              $link = mysql_connect(dbHost, dbUser, dbPassword);
                if(!$link) {
                    die('Failed to connect to server: ' . mysql_error());
                }

                //Select database
                $db = mysql_select_db(dbDatabase);
                if(!$db) {
                    die("Unable to select database");
                }
              $query1  = "Select tblClient.clientName,tblClient.clientID FROM tblClientHaulier,tblClient WHERE tblClient.clientID=tblClientHaulier.clientID And tblClientHaulier.haulierID=".$_SESSION['haulierID']." And tblClient.clientStatus='a'";
        //echo $query1;
        $result1 = mysql_query($query1);
        echo "<select class='select' id='clientID' name='clientID' > ";
        echo "<option value=''>-Client Name-</option>";
        while($row1 = mysql_fetch_array($result1, MYSQL_ASSOC))
        {
            if($row1['clientID']==$clientID)
              {
               echo "<option selected value=".$row1['clientID'].">".$row1['clientName']."</option>";
              }
              else
              {
               echo "<option value=".$row1['clientID'].">".$row1['clientName']."</option>";
              }
          }
        echo "</select>";
        mysql_close($link);
        ?>

            </td>
        </tr>    
        <tr>
            <td><p class=error id="clientNameError" ></p></td>
          <td></td>
        </tr>

        <tr>
            <td>             
              <label class=description for=element_1>Name<font color="red">*</font></label> 
            </td>
            <td>
              <input class="text"  id="driverName" name="driverName" value="<?php echo $driverName?>">  
            </td>
        </tr>
        <tr>
            <td><p class=error id="driverNameError" ></p></td>
          <td></td>
        </tr>

        <tr>
            <td>             
              <label class="description">Date of Birth<font color="red">*</font></label>
            </td>
            <td>
              <?php
        echo "<select class='select' id='dateOfBirthDay' name='dateOfBirthDay' > ";
        echo "<option value=''>-Day-</option>";
        for($d=1;$d<32;$d++)
        {
            if($d<10)
            {
                $d="0".$d;
            }
            if($d==$dateOfBirthDay)
              {
               echo "<option selected value=".$d.">".$d."</option>";
              }
              else
              {
               echo "<option value=".$d.">".$d."</option>";
              }
          }
        echo "</select>";
        ?>

        <?php
        echo "<select class='select' id='dateOfBirthMonth' name='dateOfBirthMonth' > ";
        echo "<option value=''>-Month-</option>";
        for($m=1;$m<13;$m++)
        {
            if($m<10)
            {
                $m="0".$m;
            }
            if($m==$dateOfBirthMonth)
              {
               echo "<option selected value=".$m.">".$m."</option>";
              }
              else
              {
               echo "<option value=".$m.">".$m."</option>";
              }
          }
        echo "</select>";
        ?>
        <?php
        echo "<select class='select' id='dateOfBirthYear' name='dateOfBirthYear' > ";
        echo "<option value=''>-Year-</option>";
        for($y=1940;$y<1995;$y++)
        {
            if($y==$dateOfBirthYear)
              {
               echo "<option selected value=".$y.">".$y."</option>";
              }
              else
              {
               echo "<option value=".$y.">".$y."</option>";
              }
          }
        echo "</select>";
        ?>
        <label class="description">(dd/mm/yyyy)</label> 
            </td>
        </tr>    
        <tr>
            <td><p class=error id="driverDateOfBirthError" ></p></td>
          <td></td>
        </tr>

        <tr>
            <td>             
              <label class=description >New I/C No:<font color="red">*</font></label> 
            </td>
            <td>
              <input class="text" id="driverNewICNo" name="driverNewICNo" value="<?php echo $driverNewIcNo?>">      
            </td>
        </tr>
        <tr>
            <td><p class=error id="driverNewICNoError" ></p></td>
          <td></td>
        </tr>

        <tr>
            <td>             
              <label class=description for=element_1>Recent Image</label> 
            </td>
            <td>         
              <input type="file" class="file" id="driverImage" name="driverImage" value="" size="50px">
            </td>
        </tr>

        <tr>
            <td>             
              <label class=description for=element_1>IC Image</label> 
            </td>
            <td>         
              <input type="file" class="file" id="driverICImage" name="driverICImage" value="" size="50px">
            </td>
        </tr>    

        <tr>
            <td>             
              <label class=description >Old I/C No:</label> 
            </td>
            <td>
              <input class="text" id="driverOldICNo" name="driverOldICNo" value="<?php echo $driverOldIcNo?>">      
            </td>
        </tr>

        <tr>
            <td>             
              <label class=description >Address:</label> 
            </td>
            <td>
              <textarea rows="5" cols="20" class="textarea" id="driverAddress" name="driverAddress"></textarea>
            </td>
        </tr>

        <tr>
            <td>             
              <label class=description >Religion:</label> 
            </td>
            <td>
              <select class="select" id="driverReligion" name="driverReligion">
                    <option value="">-Select Religion-</option>
                    <option value="Muslim">Muslim</option>
                    <option value="Christian">Christian</option>
                    <option value="Buddhist">Buddhist</option>
                    <option value="Hindu">Hindu</option>
                    <option value="Sikh">Sikh</option>
                    <option value="Others">Others</option>
                </select>                
            </td>
        </tr>

        <tr>
            <td>             
              <label class=description >Race:</label> 
            </td>
            <td>
              <input class="text" id="driverRace" name="driverRace" value="<?php echo $driverRace?>">       
            </td>
        </tr>

        <tr>
            <td>             
              <label class=description >Nationality:</label> 
            </td>
            <td>
              <?php
              $link = mysql_connect(dbHost, dbUser, dbPassword);
                if(!$link) {
                    die('Failed to connect to server: ' . mysql_error());
                }

                //Select database
                $db = mysql_select_db(dbDatabase);
                if(!$db) {
                    die("Unable to select database");
                }
              $query1  = "Select tblCountry.countryCode,tblCountry.countryName FROM tblCountry Order By tblCountry.countryName ";
        //echo $query1;
        $result1 = mysql_query($query1);
        echo "<select class='select' id='driverNationality' name='driverNationality' > ";
        echo "<option value=''>-Country Name-</option>";
        while($row1 = mysql_fetch_array($result1, MYSQL_ASSOC))
        {
            if($row1['countryCode']==$driverNationality)
              {
               echo "<option selected value=".$row1['countryCode'].">".$row1['countryName']."</option>";
              }
              else
              {
               echo "<option value=".$row1['countryCode'].">".$row1['countryName']."</option>";
              }
          }
        echo "</select>";
        mysql_close($link);
        ?>
      </td>          
        </tr>

        <tr>
            <td>             
              <label class=description for=element_1>Home Tel No:</label> 
            </td>
            <td>
              <input class="text" id="driverTelHome" name="driverTelHome" value="<?php echo $driverTelHome?>">      
            </td>
        </tr>    
        <tr>
            <td><p class=error id="driverTelHomeError" ></p></td>
          <td></td>
        </tr>    

        <tr>
            <td>             
              <label class=description for=element_1>Mobile Tel No:</label> 
            </td>
            <td>
              <input class="text" id="driverTelMobile" name="driverTelMobile" value="<?php echo $driverTelMobile?>">    
            </td>
        </tr>    
        <tr>
            <td><p class=error id="driverTelMobileError" ></p></td>
          <td></td>
        </tr>    

        <tr>
            <td>             
              <label class=description for=element_1>License No:<font color="red">*</font></label> 
            </td>
            <td>
              <input class="text" id="driverLicenseNo" name="driverLicenseNo" value="<?php echo $driverLicenseNo?>">    
            </td>
        </tr>

        <tr>
            <td>             
              <label class=description for=element_1>License Expiry Date:</label> 
            </td>
            <td>
              <input class="text" id="driverLicenseExpiryDate" name="driverLicenseExpiryDate" value="<?php echo $driverLicenseExpiryDate?>">    
              <input class="buttons" type="button" value="Pick" onclick="driverLicenseExpiryCal.toggle();"/>
            </td>
        </tr>    

        <tr>
            <td>             
              <label class=description for=element_1>License Image</label> 
            </td>
            <td>         
              <input type="file" class="file" id="driverLicenseImage" name="driverLicenseImage" value="" size="50px">
            </td>
        </tr>

        <tr>
            <td>             
              <label class=description for=element_1>GDL License No:</label> 
            </td>
            <td>
              <input class="text" id="driverGDLNo" name="driverGDLNo" value="<?php echo $driverGDLNo?>">    
            </td>
        </tr>

        <tr>
            <td>             
              <label class=description for=element_1>GDL License Expiry Date:<font color="red">*</font></label> 
            </td>
            <td>
              <input class="text" id="driverGDLExpiryDate" name="driverGDLExpiryDate" value="<?php echo $driverGDLExpiryDate?>">    
           <input class="buttons" type="button" value="Pick" onclick="driverGDLExpiryCal.toggle();"/>
            </td>
        </tr>    

        <tr>
            <td>             
              <label class=description for=element_1>GDL License Image</label> 
            </td>
            <td>         
              <input type="file" class="file" id="driverGDLImage" name="driverGDLImage" value="" size="50px">
            </td>
        </tr>



    </table>
</div>

<div id="dd" style="display: block">
    <table>

        <tr>
            <td>             
              <label class=description for=element_1>Relation With Next of Kin:</label> 
            </td>
            <td>
              <input class="text"  id="driverRelationshipNextOfKin" name="driverRelationshipNextOfKin" value="<?php echo $driverRelationshipNextOfKin?>">  
            </td>
        </tr>
        <tr>
            <td><p class=error id="driverRelationshipNextOfKinError" ></p></td>
          <td></td>
        </tr>

        <tr>
            <td>             
              <label class=description for=element_1>Name:</label> 
            </td>
            <td>
              <input class="text"  id="driverNameOfNextOfKin" name="driverNameOfNextOfKin" value="<?php echo $driverNameOfNextOfKin?>">  
            </td>
        </tr>
        <tr>
            <td><p class=error id="driverNameOfNextOfKinError" ></p></td>
          <td></td>
        </tr>

        <tr>
            <td>             
              <label class=description >Address:</label> 
            </td>
            <td>
              <textarea rows="5" cols="20" class="textarea" id="driverAddressOfNextOfKin" name="driverAddressOfNextOfKin"></textarea>
            </td>
        </tr>

        <tr>
            <td>             
              <label class=description for=element_1>Home Tel No:</label> 
            </td>
            <td>
              <input class="text" id="driverHomeTelOfNextOfKin" name="driverHomeTelOfNextOfKin" value="<?php echo $driverTelHome?>">    
            </td>
        </tr>    
        <tr>
            <td><p class=error id="driverHomeTelOfNextOfKinError" ></p></td>
          <td></td>
        </tr>    

        <tr>
            <td>             
              <label class=description for=element_1>Mobile Tel No:</label> 
            </td>
            <td>
              <input class="text" id="driverMobileTelOfNextOfKin" name="driverMobileTelOfNextOfKin" value="<?php echo $driverTelMobile?>">      
            </td>
        </tr>    
        <tr>
            <td><p class=error id="driverMobileTelOfNextOfKinError" ></p></td>
          <td></td>
        </tr>

        <tr>
            <td>             
              <label class=description for=element_1>Emergency Contact Person:</label> 
            </td>
            <td>
              <input class="text"  id="driverEmergencyContactPerson" name="driverEmergencyContactPerson" value="<?php echo $driverEmergencyContactPerson?>">  
            </td>
        </tr>
        <tr>
            <td><p class=error id="driverEmergencyContactPersonError" ></p></td>
          <td></td>
        </tr>    

        <tr>
            <td>             
              <label class=description for=element_1>Emergency Contact No:</label> 
            </td>
            <td>
              <input class="text"  id="driverEmergencyContactTel" name="driverEmergencyContactTel" value="<?php echo $driverEmergencyContactTel?>">  
            </td>
        </tr>
        <tr>
            <td><p class=error id="driverEmergencyContactTelError" ></p></td>
          <td></td>
        </tr>    

        <tr>
            <td>             
              <label class=description for=element_1>Wife 1 Name:</label> 
            </td>
            <td>
              <input class="text"  id="driverWife1Name" name="driverWife1Name" value="<?php echo $driverWife1Name?>">  
            </td>
        </tr>
        <tr>
            <td><p class=error id="driverWife1NameError" ></p></td>
          <td></td>
        </tr>

        <tr>
            <td>             
              <label class=description >Wife 2 Name:</label> 
            </td>
            <td>
              <input class="text"  id="driverWife2Name" name="driverWife2Name" value="<?php echo $driverWife2Name?>">  
            </td>
        </tr>
        <tr>
            <td><p class=error id="driverWife2NameError" ></p></td>
          <td></td>
        </tr>


        <tr>
            <td>             
              <label class=description >Child 1 Name:</label> 
            </td>
            <td>
              <input class="text"  id="driverChild1Name" name="driverChild1Name" value="<?php echo $driverChild1Name?>">  
            </td>
        </tr>
        <tr>
            <td><p class=error id="driverChild1NameError" ></p></td>
          <td></td>
        </tr>

        <tr>
            <td>             
              <label class="description">Child 1 D.O.B</label>
            </td>
            <td>
              <?php
        echo "<select class='select' id='child1DateOfBirthDay' name='child1DateOfBirthDay' > ";
        echo "<option value=''>-Day-</option>";
        for($d=1;$d<32;$d++)
        {
            if($d<10)
            {
                $d="0".$d;
            }
            if($d==$child1DateOfBirthDay)
              {
               echo "<option selected value=".$d.">".$d."</option>";
              }
              else
              {
               echo "<option value=".$d.">".$d."</option>";
              }
          }
        echo "</select>";
        ?>

        <?php
        echo "<select class='select' id='child1DateOfBirthMonth' name='child1DateOfBirthMonth' > ";
        echo "<option value=''>-Month-</option>";
        for($m=1;$m<13;$m++)
        {
            if($m<10)
            {
                $m="0".$m;
            }
            if($m==$child1DateOfBirthMonth)
              {
               echo "<option selected value=".$m.">".$m."</option>";
              }
              else
              {
               echo "<option value=".$m.">".$m."</option>";
              }
          }
        echo "</select>";
        ?>
        <?php
        echo "<select class='select' id='child1DateOfBirthYear' name='child1DateOfBirthYear' > ";
        echo "<option value=''>-Year-</option>";
        for($y=1940;$y<2011;$y++)
        {
            if($y==$child1DateOfBirthYear)
              {
               echo "<option selected value=".$y.">".$y."</option>";
              }
              else
              {
               echo "<option value=".$y.">".$y."</option>";
              }
          }
        echo "</select>";
        ?>
        <label class="description">(dd/mm/yyyy)</label> 
            </td>
        </tr>
        <tr>
            <td><p class=error id="child1DateOfBirthError" ></p></td>
          <td></td>
        </tr>        

        <tr>
            <td>             
              <label class=description >Child 2 Name:</label> 
            </td>
            <td>
              <input class="text"  id="driverChild2Name" name="driverChild2Name" value="<?php echo $driverChild2Name?>">  
            </td>
        </tr>

        <tr>
            <td><p class=error id="driverChild2NameError" ></p></td>
          <td></td>
        </tr>

        <tr>
            <td>             
              <label class="description">Child 2 D.O.B</label>
            </td>
            <td>
              <?php
        echo "<select class='select' id='child2DateOfBirthDay' name='child2DateOfBirthDay' > ";
        echo "<option value=''>-Day-</option>";
        for($d=1;$d<32;$d++)
        {
            if($d<10)
            {
                $d="0".$d;
            }
            if($d==$child2DateOfBirthDay)
              {
               echo "<option selected value=".$d.">".$d."</option>";
              }
              else
              {
               echo "<option value=".$d.">".$d."</option>";
              }
          }
        echo "</select>";
        ?>

        <?php
        echo "<select class='select' id='child2DateOfBirthMonth' name='child2DateOfBirthMonth' > ";
        echo "<option value=''>-Month-</option>";
        for($m=1;$m<13;$m++)
        {
            if($m<10)
            {
                $m="0".$m;
            }
            if($m==$child2DateOfBirthMonth)
              {
               echo "<option selected value=".$m.">".$m."</option>";
              }
              else
              {
               echo "<option value=".$m.">".$m."</option>";
              }
          }
        echo "</select>";
        ?>
        <?php
        echo "<select class='select' id='child2DateOfBirthYear' name='child2DateOfBirthYear' > ";
        echo "<option value=''>-Year-</option>";
        for($y=1940;$y<2011;$y++)
        {
            if($y==$child2DateOfBirthYear)
              {
               echo "<option selected value=".$y.">".$y."</option>";
              }
              else
              {
               echo "<option value=".$y.">".$y."</option>";
              }
          }
        echo "</select>";
        ?>
        <label class="description">(dd/mm/yyyy)</label> 
            </td>
        </tr>    
        <tr>
            <td><p class=error id="child2DateOfBirthError" ></p></td>
          <td></td>
        </tr>    

        <tr>
            <td>             
              <label class=description >Child 3 Name:</label> 
            </td>
            <td>
              <input class="text"  id="driverChild3Name" name="driverChild3Name" value="<?php echo $driverChild3Name?>">  
            </td>
        </tr>
        <tr>
            <td><p class=error id="driverChild3NameError" ></p></td>
          <td></td>
        </tr>

        <tr>
            <td>             
              <label class="description">Child 3 D.O.B</label>
            </td>
            <td>
              <?php
        echo "<select class='select' id='child3DateOfBirthDay' name='child3DateOfBirthDay' > ";
        echo "<option value=''>-Day-</option>";
        for($d=1;$d<32;$d++)
        {
            if($d<10)
            {
                $d="0".$d;
            }
            if($d==$child3DateOfBithDay)
              {
               echo "<option selected value=".$d.">".$d."</option>";
              }
              else
              {
               echo "<option value=".$d.">".$d."</option>";
              }
          }
        echo "</select>";
        ?>

        <?php
        echo "<select class='select' id='child3DateOfBirthMonth' name='child3DateOfBirthMonth' > ";
        echo "<option value=''>-Month-</option>";
        for($m=1;$m<13;$m++)
        {
            if($m<10)
            {
                $m="0".$m;
            }
            if($m==$child3DateOfBirthMonth)
              {
               echo "<option selected value=".$m.">".$m."</option>";
              }
              else
              {
               echo "<option value=".$m.">".$m."</option>";
              }
          }
        echo "</select>";
        ?>
        <?php
        echo "<select class='select' id='child3DateOfBirthYear' name='child3DateOfBirthYear' > ";
        echo "<option value=''>-Year-</option>";
        for($y=1940;$y<2011;$y++)
        {
            if($y==$child3DateOfBirthYear)
              {
               echo "<option selected value=".$y.">".$y."</option>";
              }
              else
              {
               echo "<option value=".$y.">".$y."</option>";
              }
          }
        echo "</select>";
        ?>
        <label class="description">(dd/mm/yyyy)</label> 
            </td>
        </tr>
        <tr>
            <td><p class=error id="child3DateOfBirthError" ></p></td>
          <td></td>
        </tr>

        <tr>
            <td>     
              <input class="buttons" type="Submit" name="<?php echo $submitTag?>" value="<?php echo $submitTag?>">
            </td>
            <td>
              <input class="buttons" type="Reset" name="Reset" value="Reset" onclick="location.href='addDriverDraft.php'">             
            </td>
        </tr>





    </table>
</div>
</div>
</form>

[Taywin]

OK, playing with hide & show could be tricky if you want it to be cross-browser. Also, it depends on how you 'hide' it. If you hide an element but want to keep its display area empty, then you need to use only 'display: none'. However, if you want it to disappear completely, you will also need 'visibility: hidden'. You could use JavaScript to manipulate the style properties.

Now, if you want it to be cross-browser, using JavaScript to manipulate those properties directly won't work for IE. The problem is that IE does NOT allow style visibility to be changed dynamically via JavaScript. As a result, it will break. A work around is to use CSS class which contains both 'display' and 'visibility', and then use JavaScript to switch the class (element.style.className = 'xxx').

Back to your code. When you use JavaScript to manipulate style.display directly, it would work with hide but not show. When you want to hide it, you use...

element.style.display = "none"

But when you want to turn it back on from hiding, you need to do it

element.style.display = null

It is odd, but it is usually that way... Don't know why...

I have coded similar tab functionality as yours, but I used pure JavaScript to do the whole thing for me. :P

[newbie14]

Dear Taywin,
I dont understand how to work around with css this problem can you show some code snippet. So on default what I am doing now is <div id="dd" style="display: block"> and <div id="dp" style="display: none"> is this correct? Since you have coded tab can you maybe give some samples to learn further. Thank you for your help.

[Taywin]

The CSS workaround is to use 2 CSS classes - one for show and one for hide. The show may or may not contain anything but an empty class. But for easier to understand, I would put some properties in anyway.

.show {
  display: block;
  visibility: visible;
}
.hide {
  display: none;
  visibility: hidden;
}

Now, when you use your javascript to show/hide, instead of changing the element property directly, you just change the element's class.

element.className = "show"            or
  element.className = "hide"

If you want to create your own tab display, you will need to understand how this hide & show works. Also, you need to use visibility property as well because it is important in display.

Now, what you need to do is to put contents you want inside a div which will be displayed as a tab. You must have another div that holds all these tab divs inside. Also the div must have property 'position:relative' in order to display tabs correctly.

All tab divs will have the same CSS class and are in the same page. One of the property for these tab divs is 'position:absolute', so they can be display at the same location and looks like real tabs. If you use multiple table tags, be sure to put each table inside each div tag. One of them has the 'show' class, and the rest will have 'hide'.

Now you add JavaScript to each button to hide the current tag and display the next. This is where you could customize your validation for each tab before display the next tab. However, you use a 3rd party software/library to do it for you, you may need to dig in a bit in order to find out how it works. That's why I suggested you to just do it at the end to simplify the problem.

[newbie14]

Dear Taywin,
Ok I have added the css with the class and modified my javascript as below. Unfortutanely once I have set either one of the div to show it remains show even after the showTab function is called. The worse part sometimes one of the tab goes missing to left and sometimes the right tab gets very long.

function showTab(_id) 
{
	
	var tabID=_id;  
	//document.getElementById("dp").style.display="none";
	//document.getElementById("dd").style.display="none";			
	//document.getElementById(_id).style.display="block";
  alert("tab id : "+tabID);
	
	if(tabID=="dp")
	{
		alert("DP : "+tabID);
		//document.getElementById(tabID).style.display = 'block'; 
		document.getElementById("dp").className = "show"; 
		document.getElementById("dd").className = "hide";
	}
	else
	{
		alert("DD : "+tabID);
		document.getElementById("dd").className = "show"; 
		document.getElementById("dp").className = "hide";
	}
}

In accordance I have added this

<div id="main" style="position:absolute" >
<div id="dp" class="hide" style="position:relative" >
**I remove this part to make code simpler
</div>
<div id="dd" class="show" style="position:relative">
**I remove this part to make code simpler
</div>
</div>