Validate Dynamic Dropdown With Ajax - php

Question

I have a drop down menu of mobile brands. When a user selects a mobile brand a dynamic drop populates with the mobile model according to the mobile brand I want to validate that mobile model drop down for a blank select value. I am using ajax xmlhttp request for getting the mobile model drop down menu.
My entire code is:
Code for page with mobile brand drop down menu
<script type="text/javascript">
function validate() {
if (document.myform.step3_mobilebrand.value=="") {
document.getElementById("error1").innerHTML = (error1) ? "<img src='images/formerror.gif' height='15' width='18'>" : "";
document.myform.step3_mobilebrand.focus();
return false;
}
var myTextField = document.myform.getElementById('step3_mobilemodel').value;
if (myTextField == "") {
document.getElementById("error2").innerHTML = (error2)?"<img src='images/formerror.gif' height='15' width='18'>" : "";
document.myform.step3_mobilemodel.focus();
return false;
}
}
</script>
<?php
if (isset($_POST['submitted']) and $_POST['submitted']=="Continue") {
$mobilebrand1 = $_POST['step3_mobilebrand'];
$mobilemodel1 = $_POST['step3_mobilemodel'];
if ($mobilemodel1=="") {
echo "Please Select Mobile Model";
}
$connectiontype=$_POST['step3_connectiontype'];
$internet=$_POST['step3_internet'];
include("admin/config.php");
$sql="insert into member_detail (mobilebrand,mobilemodel,connection_type,internet) values('$mobilebrand1','$mobilemodel1','$connectiontype','$internet')";
mysql_query($sql);
}
?>
<script type="text/javascript">
function showUser(str) {
if (str=="") {
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
} else {// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getuser.php?q="+str,true);
xmlhttp.send();
}
</script>
<form name="myform" method="post" action="" onsubmit="return validate();">
<table>
<tr>
<td>Mobile Brand</td>
<td><?php
include ("admin/config.php");
echo "<select name='step3_mobilebrand' onchange='showUser(this.value)'><option value='' selected>Select Mobile Brand</option>";
$result = mysql_query ("select * from mobilebrand order by mobilebrand");
while ($adcom=mysql_fetch_array($result)) {
echo "<option value=\"".$adcom['id']."\">".htmlspecialchars($adcom['mobilebrand'])."</option>";
}
echo "</select>";?><span id="error1" style="color:red;"></span></td>
</tr>
</table>
<div id="txtHint"></div>
<table>
<tr>
<td>Connection Type</td>
<td><input type="radio" name="step3_connectiontype" value="PrePaid" checked="checked">Prepaid
<input type="radio" name="step3_connectiontype" value="PostPaid">Postpaid
<span id="error3" style="color:red;"></span>
</td>
</tr>
<tr>
<td>Have Internet On Mobile</td>
<td><input type="radio" name="step3_internet" value="Yes" checked="checked">Yes
<input type="radio" name="step3_internet" value="No">No
<span id="error4" style="color:red;"></span>
</td>
</tr>
<tr>
<td></td>
<td><input type="submit" name="submitted" value="Continue"></td>
</tr>
</table>
</form>
and the code of getuser.php is
<table>
<tr>
<td>Mobile Model</td>
<td>
<?php
$q=$_GET["q"];
include("admin/config.php");
echo "<select name='step3_mobilemodel' id='step3_mobilemodel' ><option value=''>Select Mobile Model</option>";
$result = mysql_query ("select * from mobilemodel where brandcode='".$q."'");
while ($adcom=mysql_fetch_array($result)) {
echo "<option value=\"".$adcom['mobilemodel']."\">".htmlspecialchars($adcom['mobilemodel'])."</option>";
}
echo "</select>"; ?>
</td>
</tr>
</table>
The Output am getting is correct i just want to validate the mobile model drop down menu for blank select

Answer 1

For validating select you can do:
var e = document.getElementById("step3_mobilemodel");
var mobileVal = e.options[e.selectedIndex].value;
if(mobileVal == "") {
...//show your error here
}
Hope it helps

Answer 2

This is pretty much what Sudhir posted (+1 from me) but with an example in a fiddle: http://jsfiddle.net/5TYwH/1/ using the onchange event handler.

Answer 3

May be you can just add a php validation for $q.
<table>
<tr>
<td>Mobile Model</td>
<td>
<?php
$q=$_GET["q"];
echo "<select name='step3_mobilemodel' id='step3_mobilemodel'>"
if($q != ""){
include("admin/config.php");
echo "<option value=''>Select Mobile Model</option>";
$result = mysql_query ("select * from mobilemodel where brandcode='".$q."'");
while ($adcom=mysql_fetch_array($result)) {
echo "<option value=\"".$adcom['mobilemodel']."\">".htmlspecialchars($adcom['mobilemodel'])."</option>";
}}else{ echo "<option value=''>Please select a mobile first</option>";} echo "</select>";?></td>
</tr></table>