Need help Validating a Dynamic Drop Down Box

**Barryt06** · 12-09-2009, 12:59 PM

HI all,

First off I would like to apologise if what I am asking is anywhere on the this, or any other forum. I have spent the last few days looking this up but I have had no luck in finding what I need.

I have some PHP code to allow tracking of calls recieved into the CC and I have Javascript form validition which will work on the first textbox, but will not work on the drop down menu's, I think it is because they are Dynamic, and read from my SQL database but I am not sure. The code for the dynamic dropdown is done in Javascript also.

I must also admit, I know very little Javascript.

My PHP understanding is pretty good.

Please find my script below, I hope this helps.

If anyone would be able to help in any way that would be excellent

Thanks in Advance.

Code:

<html>
<head>
  <title>Call Driver Tracking Form</title>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<link rel="stylesheet" type="text/css" href="calldriver.css">
<style>
  .error {
  font-family: Tahoma;
font-size: 8pt;
  color: red;
  margin-left: 50px;
  display:none;
  }
  
</style>





<script language="javascript" type="text/javascript">

// Roshan's Ajax dropdown code with php
// This notice must stay intact for legal use
// Copyright reserved to Roshan Bhattarai - nepaliboy007@yahoo.com
// If you have any problem contact me at http://roshanbh.com.np
function getXMLHTTP() { //fuction to return the xml http object
		var xmlhttp=false;	
		try{
			xmlhttp=new XMLHttpRequest();
		}
		catch(e)	{		
			try{			
				xmlhttp= new ActiveXObject("Microsoft.XMLHTTP");
			}
			catch(e){
				try{
				xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
				}
				catch(e1){
					xmlhttp=false;
				}
			}
		}
		 	
		return xmlhttp;
    }
	
	function getState(countryId) {		
		
		var strURL="findState.php?country="+countryId;
		var req = getXMLHTTP();
		
		if (req) {
			
			req.onreadystatechange = function() {
				if (req.readyState == 4) {
					// only if "OK"
					if (req.status == 200) {						
						document.getElementById('statediv').innerHTML=req.responseText;						
					} else {
						alert("There was a problem while using XMLHTTP:\n" + req.statusText);
					}
				}				
			}			
			req.open("GET", strURL, true);
			req.send(null);
		}		
	}
	function getCity(countryId,stateId) {		
		var strURL="findCity.php?country="+countryId+"&state="+stateId;
		var req = getXMLHTTP();
		
		if (req) {
			
			req.onreadystatechange = function() {
				if (req.readyState == 4) {
					// only if "OK"
					if (req.status == 200) {						
						document.getElementById('citydiv').innerHTML=req.responseText;						
					} else {
						alert("There was a problem while using XMLHTTP:\n" + req.statusText);
					}
				}				
			}			
			req.open("GET", strURL, true);
			req.send(null);
		}
				
	}





</script>


<script>

function checkForm() {
account = document.getElementById("account").value;
country = document.getElementById("country").value;
state = document.getElementById("state").value;
city = document.getElementById("city").value;


if (account == "") {
	hideAllErrors();
document.getElementById("accountError").style.display = "inline";
document.getElementById("account").select();
document.getElementById("account").focus();
  return false;
  } else if (country == "") {
hideAllErrors();
document.getElementById("countryError").style.display = "inline";
document.getElementById("country").select();
document.getElementById("country").focus();
  return false;
  } else if (state == "") {
  hideAllErrors();
document.getElementById("stateError").style.display = "inline";
document.getElementById("state").select();
document.getElementById("state").focus();
  return false;
  } else if (city == "") {
hideAllErrors();
document.getElementById("cityError").style.display = "inline";
document.getElementById("city").select();
document.getElementById("city").focus();
  return false;
  }
  return true;
}


 function hideAllErrors() {
document.getElementById("accountError").style.display = "none"
document.getElementById("countryError").style.display = "none"
document.getElementById("stateError").style.display = "none"
document.getElementById("cityError").style.display = "none"

}







</script>



</head>
<body>

<body>


<br /><br /><br /><br /><br /><br /><br /><br /><br /> <!-- Spacing -->

<!-- Heading -->
<H2><center>Call Driver Tracking Form</center></H2>



<br /><br /><br /><br /> <!-- Spacing -->



<table border="1" width="60%" border="0" cellspacing="2" cellpadding="2" align="center">
<form onSubmit="return checkForm();"  method="post" action="SubmitCallDriver.php" name="form1">
<tr>
<th>Account</th>
<td><input name="account" type="text" class="text" id="account" size="30"/><div class=error id=accountError>Required</div><br><td>

</tr>
  <tr>
    <td width="150">Product</td>
    <td  width="150"><select name="country" id="country" onChange="getState(this.value)"> <!--Country = Category -->
	<option value=''>Choose Product</option>
	<?php

include 'config.php';	
	
$query = "SELECT * FROM csb_country";

$result = mysql_query($query);

while($r=mysql_fetch_array($result))
{
 {

echo "<option value=" . $r['id']. ">" . $r['country'] . "</option>\n";
  
 }
}



?>
</select><div class=error id=countryError>Required</div></td>
  </tr>
  <tr style="">
    <td>Call Driver</td>
    <td ><div id="statediv"><select name="state" id="state" > <!--State = Sub Category -->
	<option value =''>Select Product First</option>
        </select></div><div class=error id=stateError>Required</div></td>
  </tr>
  <tr style="">
    <td>Transfer to MS</td>
    <td ><div id="citydiv"><select name="city" id="city"> <!--City = Sub-SubCategory -->
	<option value =''>Select Category First</option>
        </select></div><div class=error id=cityError>Required</div></td>
  </tr>
  <tr>
<td>Additional Info<br /><br />
<font size="1">(Required for Transfer only)</tD>
<td><textarea name="comment" cols=22 rows=5 id="comment"></textarea><td>
</tr>
  <!--tr>
<td>Escalated by?</td>
<td><input name="Escalatedby" type="text" class="text" id="Escalatedby" size="30" /><td>
</tr-->
  <tr>
      <td colspan='2'>&nbsp;</td>
      </tr>
  <tr>
  <td colspan="2" align="center"><input name="Submit" type="submit" class="button" value="Submit" /></td>
    
  </tr>
</table>
</form>
</body>
</html>

THe code is not exactly tidy, apologies for this.

Thread: Need help Validating a Dynamic Drop Down Box

Thread Tools

Search Thread

Need help Validating a Dynamic Drop Down Box

Bookmarks

Bookmarks

Posting Permissions