Custom tab design

Question

newbie14 0 Posting Pro

12 Years Ago

Dear All,
I have page like this using a third party tab. The problem I have emailed them so many time but no reply. Here a sample link http://183.78.169.54/v3/addTab.php. I would like to create my own any idea how to do it.

web-design

3 Contributors
8 Replies
79 Views
1 Week Discussion Span
Latest Post 12 Years Ago Latest Post by macgurl70

All 8 Replies

almostbob 866 Retired: passive income ROCKS

12 Years Ago

post the code

almostbob 866 Retired: passive income ROCKS

12 Years Ago

you posted an anonymized link, nobody in their right mind will click it, the google search would be "drive by spyware"
Post the code

Reply to this topic

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.

newbie14 0 Posting Pro · Answer 1 · 2011-05-27T23:37:07+00:00

Dear Bob,
The code is too long. Do you want me to post the whole thing? Actually I have now created my own tab images. So how to go about getting something the same effect.

newbie14 0 Posting Pro · Answer 2 · 2011-05-28T20:24:58+00:00

Dear Bob,
Below is the codes.

<html> 
<head> 
<link rel="stylesheet" type="text/css" href="my1.css" media="all"> 
<link rel="stylesheet" type="text/css" href="epoch_styles.css" />
<script type="text/javascript" src="epoch_classes.js"></script>
<script type="text/javascript">
/*You can also place this code in a separate file and link to it like epoch_classes.js*/
    var driverLicenseExpiryCal,driverGDLExpiryCal;

    var dp_cal,ms_cal;      
  window.onload = function () {


    driverLicenseExpiryCal  = new Epoch('epoch_popup','popup',document.getElementById('driverLicenseExpiryDate'));
    driverGDLExpiryCal  = new Epoch('epoch_popup','popup',document.getElementById('driverGDLExpiryDate'));

    document.getElementById("driverDetails").className = "show"; 
    document.getElementById("driverLicenses").className = "hide";
    document.getElementById("driverNextOfKin").className = "hide";

};
</script>
<script type="text/javascript">
function showTab(_id) 
{

    var tabID=_id;  

    //var class1 = document.getElementById("driverDetails").className; 
    //var class2 = document.getElementById("driverLicenses").className; 
    //var class3 = document.getElementById("driverNextOfKin").className; 

    <?php         
    $driverDetails=true;
    $driverLicenses='';
        $driverNextOfKin='';
        $driverEmployment='';       

        ?>
    if(tabID=="driverDetails")
    {
        <?php         
    $driverDetails=true;
    $driverLicenses=false;
        $driverNextOfKin=false;
        $driverEmployment=false;
        ?>
        alert("driverDetails : "+tabID);
        //document.getElementById(tabID).style.display = 'block'; 
        document.getElementById("driverDetails").className = "show"; 
        document.getElementById("driverLicenses").className = "hide";
        document.getElementById("driverNextOfKin").className = "hide";
        document.getElementById("driverEmployment").className = "hide";     
    }
    else if(tabID=="driverLicenses")
    {
        //alert("DD : "+tabID);
        document.getElementById("driverDetails").className = "hide"; 
        document.getElementById("driverLicenses").className = "show";
        document.getElementById("driverNextOfKin").className = "hide";
        document.getElementById("driverEmployment").className = "hide";
        <?php         
    $driverDetails='';
    $driverLicenses=true;
        $driverNextOfKin='';
        $driverEmployment='';

        ?>
    }
    else if(tabID=="driverNextOfKin")
    {
        //alert("DD : "+tabID);
        document.getElementById("driverDetails").className = "hide"; 
        document.getElementById("driverLicenses").className = "hide";
        document.getElementById("driverNextOfKin").className = "show";
        document.getElementById("driverEmployment").className = "hide";
        <?        
    $driverDetails='';
    $driverLicenses='';
        $driverNextOfKin=true;
        $driverEmployment='';
        ?>
    }
    else if(tabID=="driverEmployment")
    {
        alert("DD : "+tabID);
        document.getElementById("driverDetails").className = "hide"; 
        document.getElementById("driverLicenses").className = "hide";
        document.getElementById("driverNextOfKin").className = "hide";
        document.getElementById("driverEmployment").className = "show";
        <?        
    $driverDetails='';
    $driverLicenses='';
        $driverNextOfKin='';
        $driverEmployment=true;
        ?>
    }
}

function validateForm() 
{
            //alert("TEST");
            //Get the controls
            var clientNameControl = document.getElementById("clientID");
            var driverNameControl = document.getElementById("driverName");
      var dateOfBirthDayControl = document.getElementById("dateOfBirthDay");
      var dateOfBirthMonthControl = document.getElementById("dateOfBirthMonth");
      var dateOfBirthYearControl = document.getElementById("dateOfBirthYear");
      var driverNewICNoControl = document.getElementById("driverNewICNo");

      var driverLicenseNoControl = document.getElementById("driverLicenseNo");
      var driverLicenseExpiryDateControl = document.getElementById("driverLicenseExpiryDate");
      var driverGDLNoControl = document.getElementById("driverGDLNo");
      var driverGDLExpiryDateControl = document.getElementById("driverGDLExpiryDate");

      var child1DateOfBirthDayControl = document.getElementById("child1DateOfBirthDay");
      var child1DateOfBirthMonthControl = document.getElementById("child1DateOfBirthMonth");
      var child1DateOfBirthYearControl = document.getElementById("child1DateOfBirthYear");
      var child2DateOfBirthDayControl = document.getElementById("child2DateOfBirthDay");
      var child2DateOfBirthMonthControl = document.getElementById("child2DateOfBirthMonth");
      var child2DateOfBirthYearControl = document.getElementById("child2DateOfBirthYear");
      var child3DateOfBirthDayControl = document.getElementById("child3DateOfBirthDay");
      var child3DateOfBirthMonthControl = document.getElementById("child3DateOfBirthMonth");
      var child3DateOfBirthYearControl = document.getElementById("child3DateOfBirthYear");

      //alert("clientIDControl : "+clientIDControl.value);
      //alert("nameControl : "+nameControl.value);



            //Create expressions
            var isNumeric = /^[0-9]+$/;
            var isLetters = /^[a-zA-Z ]+$/;
            var isEmail = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;

            //Cheack each one and if it fails, set an appropriate error message
            var gotClientNameError="false";
            var gotDriverNameError="false";
            var gotDateOfBirthError="false";
            var gotDriverNewICNoError="false";          

            var gotDriverLicenseNoError="false";
            var gotDriverLicenseExpiryDateError="false";
            var gotDriverGDLNoError="false";
            var gotDriverGDLExpiryDateError="false";


            var gotChild1DateOfBirthError="false";
            var gotChild2DateOfBirthError="false";
          var gotChild3DateOfBirthError="false";

          //alert("client ID:"+clientNameControl.value+"TEST");
            //If name is empty or invalid
            if(clientNameControl.value >0)
            {
                clientNameError.innerHTML = "";
              gotClientNameError="false";

            }
            /*else if(nameControl.value.search(isLetters))
            {
                nameError.innerHTML = " * Name must only contain letters";
                gotError="true";                
            }*/
            else
            {
                clientNameError.innerHTML = " * Client Name is empty";
                gotClientNameError="true";
          }

          if(driverNameControl.value == "")
            {
                driverNameError.innerHTML = " * Driver Name is empty";
                gotDriverNameError="true";
            }
            else if(driverNameControl.value.search(isLetters))
            {
                driverNameError.innerHTML = " * Driver Name must only contain letters";
                gotDriverNameError="true";              
            }
            else
            {
                driverNameError.innerHTML = "";
              gotDriverNameError="false";
          }       

      if(dateOfBirthDayControl.value>0 && dateOfBirthMonthControl.value>0 && dateOfBirthYearControl.value >0)
      {
          var myDate = new Date();
              //alert("day : "+ dateOfBirthDayControl.value+"month : "+dateOfBirthMonthControl.value+"year : "+dateOfBirthYearControl.value);
              myDate.setFullYear( dateOfBirthYearControl.value, dateOfBirthMonthControl.value-1, dateOfBirthDayControl.value );
          //alert("my date : "+myDate+"get month :"+myDate.getMonth());
          if ( myDate.getMonth() != dateOfBirthMonthControl.value-1 ) 
          {      
            driverDateOfBirthError.innerHTML = "In Valid Date";
                  gotDateOfBirthError="true";
              }
              else
              {
                //alert(" valid date");
                driverDateOfBirthError.innerHTML = "";
                  gotDateOfBirthError="false";
              }
      }
      else
      {
        driverDateOfBirthError.innerHTML = "Select Data Of Birth";
              gotDateOfBirthError="true";
      }      

      if(driverNewICNoControl.value == "")
            {
                driverNewICNoError.innerHTML = " * Driver New IC No is empty";
                gotDriverNewICNoError="true";
            }
            else if(driverNewICNoControl.value.search(isNumeric))
            {
                driverNewICNoError.innerHTML = " * Driver New IC No must only contain numbers";
                gotDriverNewICNoError="true";               
            }
            else
            {
                driverNewICNoError.innerHTML = "";
              gotDriverNewICNoError="false";
          }

          if(driverLicenseNoControl.value == "")
            {
                driverLicenseNoError.innerHTML = " * License No. is empty";
                gotDriverLicenseNoError="true";             
            }           
            else
            {
                driverLicenseNoError.innerHTML = "";
              gotDriverLicenseNoError="false";
          }

          if(driverLicenseExpiryDateControl.value == "")
            {
                driverLicenseExpiryDateError.innerHTML = " * License Expiry Date is empty";
                gotDriverLicenseExpiryDateError="true";             
            }           
            else
            {
                driverLicenseExpiryDateError.innerHTML = "";
              gotDriverLicenseExpiryDateError="false";
          }



          if(driverGDLNoControl.value == "")
            {
                driverGDLNoError.innerHTML = " * GDL No. is empty";
                gotDriverGDLNoError="true";             
            }           
            else
            {
                driverGDLNoError.innerHTML = "";
              gotDriverGDLNoError="false";
          }

          if(driverGDLExpiryDateControl.value == "")
            {
                driverGDLExpiryDateError.innerHTML = " * GDL Expiry Date is empty";
                gotDriverGDLExpiryDateError="true";             
            }           
            else
            {
                driverGDLExpiryDateError.innerHTML = "";
              gotDriverGDLExpiryDateError="false";
          }


      if(child1DateOfBirthDayControl.value>0 && child1DateOfBirthMonthControl.value>0 && child1DateOfBirthYearControl.value >0)
      {
          var myDate = new Date();
              //alert("day : "+ dateOfBirthDayControl.value+"month : "+dateOfBirthMonthControl.value+"year : "+dateOfBirthYearControl.value);
              myDate.setFullYear( child1DateOfBirthYearControl.value, child1DateOfBirthMonthControl.value-1, child1DateOfBirthDayControl.value );
          //alert("my date : "+myDate+"get month :"+myDate.getMonth());
          if ( myDate.getMonth() != child1DateOfBirthMonthControl.value-1 ) 
          {      
            child1DateOfBirthError.innerHTML = "In Valid Date";
                  gotChild1DateOfBirthError="true";
              }
              else
              {
                //alert(" valid date");
                child1DateOfBirthError.innerHTML = "";
                  gotChild1DateOfBirthError="false";
              }
      }
      /*else
      {
        child1DateOfBirthError.innerHTML = "Select Data Of Birth";
              gotChild1DateOfBirthError="true";
      }*/

      if(child2DateOfBirthDayControl.value>0 && child2DateOfBirthMonthControl.value>0 && child2DateOfBirthYearControl.value >0)
      {
          var myDate = new Date();
              //alert("day : "+ dateOfBirthDayControl.value+"month : "+dateOfBirthMonthControl.value+"year : "+dateOfBirthYearControl.value);
              myDate.setFullYear( child2DateOfBirthYearControl.value, child2DateOfBirthMonthControl.value-1, child2DateOfBirthDayControl.value );
          //alert("my date : "+myDate+"get month :"+myDate.getMonth());
          if ( myDate.getMonth() != child2DateOfBirthMonthControl.value-1 ) 
          {      
            child2DateOfBirthError.innerHTML = "In Valid Date";
                  gotChild2DateOfBirthError="true";
              }
              else
              {
                //alert(" valid date");
                child2DateOfBirthError.innerHTML = "";
                  gotChild2DateOfBirthError="false";
              }
      }
      /*else
      {
        child2DateOfBirthError.innerHTML = "Select Data Of Birth";
              gotChild2DateOfBirthError="true";
      }*/
      if(child3DateOfBirthDayControl.value>0 && child3DateOfBirthMonthControl.value>0 && child3DateOfBirthYearControl.value >0)
      {
          var myDate = new Date();
              //alert("day : "+ dateOfBirthDayControl.value+"month : "+dateOfBirthMonthControl.value+"year : "+dateOfBirthYearControl.value);
              myDate.setFullYear( child3DateOfBirthYearControl.value, child3DateOfBirthMonthControl.value-1, child3DateOfBirthDayControl.value );
          //alert("my date : "+myDate+"get month :"+myDate.getMonth());
          if ( myDate.getMonth() != child3DateOfBirthMonthControl.value-1 ) 
          {      
            child3DateOfBirthError.innerHTML = "In Valid Date";
                  gotChild3DateOfBirthError="true";
              }
              else
              {
                //alert(" valid date");
                child3DateOfBirthError.innerHTML = "";
                  gotChild3DateOfBirthError="false";
              }
      }


          /*
          if(haulierContactPersonControl.value == "")
            {
                haulierContactPersonError.innerHTML = " * Contact Person is empty";
                gotHaulierContactPersonError="true";
            }
            else if(haulierContactPersonControl.value.search(isLetters))
            {
                haulierContactPersonError.innerHTML = " * Contact Person must only contain letters";
                gotHaulierContactPersonError="true";                
            }
            else
            {
                haulierContactPersonError.innerHTML = "";
              gotHaulierContactPersonError="false";
          }

          if(haulierAddressControl.value == "")
            {
                haulierAddressError.innerHTML = " * Address is empty";
                gotHaulierAddressError="true";
            }
            else
            {
                haulierAddressError.innerHTML = "";
              gotHaulierAddressError="false";
          }

          if(haulierContactNumber.value == "")
            {
                haulierContactNumberError.innerHTML = " * Contact Number is empty";
                gotHaulierContactNumberError="true";
            }
            else if(haulierContactNumber.value.search(isNumeric))
            {
                haulierContactNumberError.innerHTML = " * Contact Number is not valid";
                gotHaulierContactNumberError="true";                
            }
            else
            {
                haulierContactNumberError.innerHTML = "";
              gotHaulierContactNumberError="false";
          }
            */




            //If any errors occurred, return false, otherwise true
            if(gotClientNameError=="true" || gotDriverNameError=="true" || gotDateOfBirthError=="true" || gotDriverNewICNoError=="true")
            {
                showTab("driverDetails");
                return false;
            }
            else if(gotDriverLicenseNoError=="true" || gotDriverLicenseExpiryDateError=="true" || gotDriverGDLNoError=="true" || gotDriverGDLExpiryDateError=="true")
            {
                showTab("driverLicenses");
                return false;
            }
            else if(gotChild1DateOfBirthError=="true" || gotChild2DateOfBirthError=="true" || gotChild3DateOfBirthError=="true" )
            {
                showTab("driverNextOfKin");
                return false;
            }
            else 
                return true;
};
</script> 


<script src="http://code.jquery.com/jquery-1.5.1.min.js"></script> 
<script src="jquery.validate.js"></script> 

<script> 

        $(document).ready(function() {

            function setupSingleRowValidation(form) {
                function filledFields(array) {
                    // when given ['name', 'age'] this function will return the following string
                    // '[name="name"]:filled, [name="age"]:filled'
                    var selectors = [];
                    $(array).each(function (i, name) {
                        selectors.push('[name="' + name + '"]:filled');
                    });
                    //alert("Selector : "+selectors);
                    return selectors.join(', ');
                }
                function createSingleRowRule(field) {
                    var suffix = /\[.*\]/.exec(field),
                        name = 'name' + suffix,
                        durationOfEmployment = 'durationOfEmployment' + suffix,
                        reasonLeaving = 'reasonLeaving' + suffix;
                        previousRecords = 'previousRecords' + suffix;
                     //alert("sffux:"+suffix);
                    return {
                        required: filledFields([name, durationOfEmployment, reasonLeaving, previousRecords]),
                        number: (field === durationOfEmployment)
                    };
                }

                // clean up pre-existing rules before adding new ones
                $('tr td:not(:first) input', form).each(function () {
                    if ($(this.form).validate().currentElements.has(this).length) {
                        $(this).rules('remove');
                    }

                    var rule = createSingleRowRule(this.name);
                    $(this).rules('add', rule);
                });

                $('tr td:not(:first) textarea', form).each(function () {
                    if ($(this.form).validate().currentElements.has(this).length) {
                        $(this).rules('remove');
                    }

                    var rule = createSingleRowRule(this.name);
                    $(this).rules('add', rule);
                });

                // prepare single row rules
                var nameField = $('tr td input[name^="name"]', form);
                //var singleRowRules = createSingleRowRules(nameField.attr('name'));

                // initialize validation with single row rules
                $(form).validate({
                    /*rules: singleRowRules,*/
                    debug: true
                });
            }
            function setupMultipleRowValidation(form) {
                // clean up fields so that they contain the multiple row validation rules
                /*$(form).validate().currentElements.each(function () {
                    $(this).rules('remove');
                });*/

                $('td:not(:first) input', form).each(function () {
                    $(this).rules('add', {required: true});
                });
                $('td:not(:first) textarea', form).each(function () {
                    $(this).rules('add', {required: true});
                });
                $('[name^="durationOfEmployment"]', form).each(function () {
                    $(this).rules('add', {number: true});
                });
            };
            function setupFormValidation(form) {
                $form.validate({            
                    submitHandler: function(form) 
                    {//DOM node "form" is correct here              
                        if(validateForm()) {                    
                            form.submit();//safer than the jquery equivalent to avoid possibilitry of recursive validation              
                            }           
                    },          //*** start: optional ***           
                    invalidHandler: function() 
                    {
                        //call validateForm when $form.validate() indicates form is invalid.                
                        validateForm();         
                    }           //*** end: optional ***     
                }).resetForm();     
                if ($('tbody tr', $form).length > 1) 
                {           
                    setupMultipleRowValidation();       
                }       
                else 
                {           
                    setupSingleRowValidation();     
                }
            }

            var form = $("#form1");
            setupFormValidation(form);

            var prot = $('tr.prototype').clone().removeClass('prototype');
            $(form).data('prototype', prot);

            var id = $(document).data('idCounter') || 0;

            // Add button functionality
            $("table.dynatable button.add").click(function() 
            {
                var form = this.form;
                id++;

                // Get a new row based on the prototype row
                //var prot = master.find(".prototype").clone();
                var prot = $(form).data('prototype').clone();
                prot.find('[name^="id"]').attr("value", id);
                prot.find('[name^="name"]').attr('name', 'name[' + id + ']');
                prot.find('[name^="name"]').attr('value', '');
                prot.find('[name^="duration"]').attr('name', 'durationOfEmployment[' + id + ']');
                prot.find('[name^="duration"]').attr('value', '');
                prot.find('[name^="reasonLeaving"]').attr('name', 'reasonLeaving[' + id + ']');
                prot.find('[name^="reasonLeaving"]').attr('value', '');                
                prot.find('[name^="previousRecords"]').attr('name', 'previousRecords[' + id + ']');
                prot.find('[name^="previousRecords"]').attr('value', '');                

                $(form).find("tbody").append(prot);

                setupFormValidation(form);
                return false;
            });

            // Remove button functionality
            $("table.dynatable button.remove").live("click", function() {

                var form = this.form;

                $(this).closest("tr").remove();
                setupFormValidation(form);
            });

            jQuery('.dOnly').live('keyup', function () 
            {     
                 this.value = this.value.replace(/[^0-9\.]/g,''); 
            });
        });
</script> 
<style> 
            .dynatable {
                border: solid 1px #000; 
                border-collapse: collapse;
            }
            .dynatable th,
            .dynatable td {
                background-color:#ccc; 
                font-size:14px;
                font-color:#ffffff;
                font-family:Calibri;
            }
            .dynatable .prototype {

            }
            label.error 
            { 
                display: block; 
                color:red;
            }

            td { vertical-align: top; }

</style> 

</head> 
<body> 

<?
    $driverDetails=true;
    $driverLicenses='';
        $driverNextOfKin='';
        $driverEmployment='';
        echo "TEst DriverDetails : ".$driverDetails;
    $kts = new KoolTabs("kts");

        //Step 3: Set properties for kooltabs
        $kts->styleFolder = "KoolTabs/styles/silver";

        //Step 4: Add tabs for KoolTabs: addTab($parentid,$id,$text,$link)
        $kts->addTab("root","home","Driver List","gridDriverNormal.php");
        $kts->addTab("root","Driver Details","Driver Details","javascript:showTab(\"driverDetails\")",$driverDetails);
        $kts->addTab("root","Driver Licenses","Driver Licenses","javascript:showTab(\"driverLicenses\")",$driverLicenses);
        $kts->addTab("root","Driver Next of Kin","Driver Next of Kin","javascript:showTab(\"driverNextOfKin\")",$driverNextOfKin);
        $kts->addTab("root","Driver Employment","Driver Employment","javascript:showTab(\"driverEmployment\")",$driverEmployment);

?>
<?
require_once('haulierTopMenuNormal.php');
?>
<div >
    <h2 class="form_desicription">Add Driver (Draft)<?=$status?></h2>
</div>



<form action="<?=$_SERVER['PHP_SELF']?>" method="post" name="form1" enctype="multipart/form-data" id=form1 onSubmit="return validateForm();">
<div id="driverDetails" class="show" style="position:relative" >
    <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>
    </table>
</div>   
<div id="driverLicenses" class="show" style="position:relative" >                
  <table>        
        <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><p class=error id="driverLicenseNoError" ></p></td>
          <td></td>
        </tr>


        <tr>
            <td>             
              <label class=description for=element_1>License Expiry Date:<font color="red">*</font></label> 
            </td>
            <td id="driverLicenseExpiryCal">
              <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><p class=error id="driverLicenseExpiryDateError" ></p></td>
          <td></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:<font color="red">*</font></label> 
            </td>
            <td>
              <input class="text" id="driverGDLNo" name="driverGDLNo" value="<?php echo $driverGDLNo?>">    
            </td>
        </tr>
        <tr>
            <td><p class=error id="driverGDLNoError" ></p></td>
          <td></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><p class=error id="driverGDLExpiryDateError" ></p></td>
          <td></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="driverNextOfKin" class="hide" style="position:relative" >

    <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 id="driverEmployment" class="hide" style="position:relative" >

    <table class="dynatable"> 
             <thead> 
                <tr> 
                    <th>ID</th> 
                    <th>Name Of Former Emp.</th> 
                    <th>Duration of Emp.</th> 
                    <th>Reason for Leaving Emp.</th> 
                    <th>Previous Incidents or Records</th> 
                    <th><button class="add">Add</button></th> 
                </tr> 
            </thead> 
            <tbody> 
                  <tr class="prototype"> 
                        <td><input type="text" name="id[]" value="0" /></td> 
                        <td><input type="text" name="name[]" value="" /></td> 
                        <td><input type="text" name="durationOfEmployment[]" value="" /></td> 
                        <td><textarea rows=2 cols=15 name="reasonLeaving[]" /></textarea></td> 
                        <td><textarea rows=2 cols=15 name="previousRecords[]" /></textarea></td> 
                        <td><button class="remove">Remove</button> 
                    </tr> 
            </tbody>
   </table>

              <input class="buttons" type="Submit" name="<?php echo $submitTag?>" value="<?php echo $submitTag?>">

              <input class="buttons" type="Reset" name="Reset" value="Reset" onclick="location.href='addDriverDraft.php'">             

</div>

</form>






</div>

</body> 
</html>

almostbob 866 Retired: passive income ROCKS · Answer 3 · 2011-05-28T22:04:08+00:00

this is a link to the howto page for Kooltabs, the tab system in your page http://doc.koolphp.net/Controls/KoolTabs/Javascript/KoolTabsItem_Class/index.php
you can then configure it in anyway you like

newbie14 0 Posting Pro · Answer 4 · 2011-05-31T22:20:40+00:00

Dear Bob,
I have read this but I got a very funny problem here.In the below codes I called this showTab javascript function from the click of the each tabs.This works fine.

//Step 4: Add tabs for KoolTabs: addTab($parentid,$id,$text,$link)
$kts->addTab("root","home","Driver List","gridDriverNormal.php");
$kts->addTab("root","Driver Details","Driver Details","javascript:showTab(\"driverDetails\")",$driverDetails);
$kts->addTab("root","Driver Licenses","Driver Licenses","javascript:showTab(\"driverLicenses\")",$driverLicenses);
$kts->addTab("root","Driver Next of Kin","Driver Next of Kin","javascript:showTab(\"driverNextOfKin\")",$driverNextOfKin);
$kts->addTab("root","Driver Employment","Driver Employment","javascript:showTab(\"driverEmployment\")",$driverEmployment);

But when I called it via another javascript function the showTab function is not working in complete as below. The relevant tab is not highlighted as when is called from the php code.

//If any errors occurred, return false, otherwise true
if(gotClientNameError=="true" || gotDriverNameError=="true" || gotDateOfBirthError=="true" || gotDriverNewICNoError=="true")
{
showTab("driverDetails");
return false;
}
else if(gotDriverLicenseNoError=="true" || gotDriverLicenseExpiryDateError=="true" || gotDriverGDLNoError=="true" || gotDriverGDLExpiryDateError=="true")
{
showTab("driverLicenses");
return false;
}
else if(gotChild1DateOfBirthError=="true" || gotChild2DateOfBirthError=="true" || gotChild3DateOfBirthError=="true" )
{
showTab("driverNextOfKin");
return false;

newbie14 0 Posting Pro · Answer 5 · 2011-06-04T06:58:02+00:00

Dear Bob,
Did you manage to find any solutio on the problem why it does not work from the javascript itself?

macgurl70 9 Junior Poster · Answer 6 · 2011-06-04T11:55:42+00:00

You would have a much easier time with tabs using JQuery and the JQuery UI library.

Main link for JQuery library

Link for the JQuery UI library

An example of the JQuery UI tabs

They also provide documentation and code samples to use the widgets.

Custom tab design

Recommended Answers Collapse Answers

All 8 Replies

Recommended Answers