PDA

View Full Version : 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.


<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.