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