Dear All,
I have a page at this link http://183.78.169.54/v3/addTab.php. The problem now if you click on the Driver Employment tab and press Add button at the bottom the content will change to Driver Details. But the tab Driver Employment is still highlighted not the Driver Details.

Below is the php part of the codes which setup the tab. Each of the swapping happens via the javascript which is also listed below. The weird part is that when the function function showTab call from php it works perfectly fine and swtich the right tab. The problem when it is called from function Validate form it does not switch the tabs.

PHP Code

<?
    $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","Driver Details","Driver Details","javascript:showTab(\"driverDetails\")",$driverDetails);
		$kts->addTab("root","Driver Licenses","Driver Licenses","javascript:showTab(\"driverLicenses\")",$driverLicenses);
		$kts->addTab("root","Driver Employment","Driver Employment","javascript:showTab(\"driverEmployment\")",$driverEmployment);
		echo $kts->Render();
?>

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='';
		$driverEmployment='';		

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



function validateForm() 
{
			//alert("TEST");
			//Get the controls
			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");
     
       
      //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 gotDriverNameError="false";
			var gotDateOfBirthError="false";
			var gotDriverNewICNoError="false";			
			
			var gotDriverLicenseNoError="false";
			var gotDriverLicenseExpiryDateError="false";
			var gotDriverGDLNoError="false";
			var gotDriverGDLExpiryDateError="false";
			
			
			
		  
		  	
		  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 any errors occurred, return false, otherwise true
			if(gotDriverNameError=="true" || gotDateOfBirthError=="true" || gotDriverNewICNoError=="true")
			{
				showTab("driverDetails");
				return false;
			}
			else if(gotChild1DateOfBirthError=="true" || gotChild2DateOfBirthError=="true" || gotChild3DateOfBirthError=="true" )
			{
				showTab("driverNextOfKin");
				return false;
			}
			else 
				return true;
};

Recommended Answers

All 3 Replies

Try setting the focus of one of the new tabs elements to true.

Dear Pclfw,
Do you mean to say put in this code the true is it $kts->addTab("root","Driver Details","Driver Details","javascript:showTab(\"driverDetails\")",$driverDetails);? Thank you.

Dear Pclfw,
I have done accordingly still the same. Any other solution please?

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.