使用Ajax驗證動態下拉菜單

我有移動品牌的下拉菜單。當用戶選擇移動品牌時，會根據移動品牌在移動模型中填充動態下拉列表，我想驗證該移動模型下拉爲空白選擇值。我正在使用ajax xmlhttp請求獲取移動模型下拉菜單。使用Ajax驗證動態下拉菜單

我的整個代碼是：

代碼與手機品牌頁面上下拉菜單

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

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

輸出我得到是正確的我只想驗證空白選擇的移動模型下拉菜單

來源

2012-03-19 Manoj Kumar

你是什麼意思的「驗證」？更加詳細一些。這可能是任何事情。 – Amberlamps 2012-03-19 09:59:52

默認情況下，下拉菜單將顯示選擇移動模型，該值將爲空我想要什麼，但從下拉菜單中選擇移動模型 – 2012-03-19 10:46:05

對不起，但我不明白你的英語。 – Amberlamps 2012-03-19 10:54:08

爲了驗證選擇，你可以這樣做：


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

希望它可以幫助

來源

2012-03-19 11:28:25

這差不多就是貼的Sudhir（+1從我），但在擺弄一個例子：使用onchange事件處理程序http://jsfiddle.net/5TYwH/1/。

來源

2012-03-19 11:49:44

也許你可以爲$ 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>

來源

2012-04-09 09:07:24 John

使用Ajax驗證動態下拉菜單

回答

相關問題