Php 使用Ajax验证动态下拉列表

我有一个手机品牌的下拉菜单。当用户选择一个移动品牌时，一个动态下拉列表将根据移动品牌填充移动模型。我想验证该移动模型下拉列表的空白选择值。我使用ajax xmlhttp请求获取移动模型下拉菜单

我的全部代码是：

带有移动品牌下拉菜单的页面代码

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

函数验证（）{
if（document.myform.step3_mobilebrand.value==“”）{
document.getElementById（“error1”）.innerHTML=（error1）？“”：“”；
document.myform.step3_mobilebrand.focus（）；
返回false；
}
var myTextField=document.myform.getElementById（'step3_mobilemodel'）。值；
如果（myTextField==“”）{
document.getElementById（“error2”）.innerHTML=（error2）？：“”；
document.myform.step3_mobilemodel.focus（）；
返回false；
}
}
连接类型
预付款的
后付费
手机上网
对
不

而getuser.php的代码是

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

移动模型

---

我得到的输出是正确的，我只想验证手机型号下拉菜单中的空白选择

要验证选择，您可以执行以下操作：

var e = document.getElementById("step3_mobilemodel");
var mobileVal = e.options[e.selectedIndex].value;
if(mobileVal == "") {
  ...//show your error here
}

---

希望对您有所帮助

这与Sudhir发布的内容非常相似（+1来自我），但有一个很好的例子：使用onchange事件处理程序。

也许您可以为$q添加一个php验证

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

移动模型
“验证”是什么意思？具体点。这可以是任何内容。默认情况下，下拉菜单将显示“选择移动模型”，值为空。我只想从下拉菜单中选择移动模型，但我一点也不懂您的英语。@ManojKumar您在下面的答案中尝试过Sudhir的建议吗？@ManojKumar您可以发布下拉菜单生成的html吗？