Question

好的我有一个由PHP动态生成的下拉菜单，并填充了从数据库中提取的数据。从前面看，这个问题很好，我遇到的问题是JS验证，JavaScript不太好（“不喜欢它”），但是对于我的迷你项目，无论如何我都要使用它....

问题在于，我正在检查用户是否选择了下拉菜单中可用的选项之一，因此可以提交表单，否则会显示警告。

所以我要做的就是这个......给第一个显示“PLEASE SELECT workshop”的选项一个值=“f”，这样如果在提交表格时该下拉菜单的值== f返回false否则提交表格。

现在如果在提交时值== f显示错误但是如果值不是== f并且我从下拉菜单中选择一个值我无法继续提交它不允许我

PHP代码：

function getForex($link){
$timestamp = date("Y-m-d");

    $sql = "SELECT id, course, status, endingDate, schedule FROM courses WHERE course LIKE '%Forex%' OR  course LIKE '%forex%' AND status=5";
    $query = mysqli_query($link, $sql);
        $option='<select id="Forex" name="workshop">';
        $option.='<option id="fx" value="Forex">Select Forex Workshop</option>';
        $option.='';
            while($result = mysqli_fetch_assoc($query))
            {
                if($timestamp < $result['endingDate'])
                {
                    $option.='<option id="'.$result['id'].'" value='.$result['endingDate'].'>'.$result['course']." ".$result['schedule'].'</option>';   
                }
            }
            $option.='</select>';
            return $option;             
    }

JS CODE：

  var sel=document.getElementById('fx').value="Forex";
  if(sel.match("Forex")){
      document.getElementById('error').innerHTML = "Choose Forex Workshop Date";
      document.getElementById('fx').style.borderColor = "red";
      return false;
 }else{
     document.getElementById('fx').style.borderColor = "green";
 }

好的家伙很多非常有帮助的答案的组合有帮助，但当我添加另一个下拉菜单，如

PHP代码：

function getBinary($link){
$timestamp = date("Y-m-d");

    $sql2 = "SELECT id, course, status, endingDate, schedule FROM courses WHERE course LIKE '%Binary%' OR course LIKE '%binary%' AND status=5";
    $query2 = mysqli_query($link, $sql2);
        $option2='<select id="Binary" name="workshop">';
        $option2.='<option id="bi" value="Binary">Select Binary Workshop</option>';
        $option2.='';
            while($result2 = mysqli_fetch_assoc($query2))
            {
                if($timestamp < $result2['endingDate'])
                {
                    $option2.='<option id="'.$result2['id'].'" value="'.$result2['endingDate'].'">'.$result2['course']." ".$result2['schedule'].'</option>';
                }
            }
            $option2.='</select>';
            return $option2;
}

JS代码：

  var selbi=document.getElementById('Binary').value;
  if(selbi.match("Binary")){
      document.getElementById('error').innerHTML = "Choose Binary Workshop Date";
      return false;
 }

问题变成了内部HTML消息仅显示为外汇并且被扭曲，即如果未选择外汇，则显示消息选择外汇研讨会，如果我选择外汇研讨会，则显示选择二元研讨会：D

Answer 1

您没有使用select id use select id

var sel=document.getElementById('Forex').value;
  if(sel.match("Forex")){
      document.getElementById('error').innerHTML = "Choose Forex Workshop Date";
      document.getElementById('fx').style.borderColor = "red";
      return false;
 }else{
     document.getElementById('fx').style.borderColor = "green";
 }

Answer 2

我已经完成了javaScript下拉验证。当下拉值为“select one”时，给你留言“请选择你的值”。我在github中的洞项目.Project链接是Javascript drop-down value validation

Answer 3

你必须使用下拉Id'Forex'来获取所选下拉值而不是选项ID，如下所示

var sel = document.getElementById('Forex').value;

Answer 4

Html代码

<form id="send" name="myfrom" action="confrimationPage.php" method="POST" onsubmit="return validateForm(this);" >

                <p>
                    <label for="company">Gender</label>
                    <select id="gender" name="gender">
                        <option value="Select One">Select One</option>
                        <option>Male</option>
                        <option>Female</option>
                    </select>
                </p>

                <p>
                    <label for="country">Postal Code</label>
                    <input id="Country" type="text" name="postalCode"  />
                </p>

                <p>
                    <button id="submit" type="submit">Submit</button>
                </p>

            </form>

* JavaScript *

  <script type="text/javascript">

function validateForm(form)
{
    // Gender empty or not
    var selectGender=document.getElementById('gender').value;
    if(selectGender=="Select One")
    {
        alert("Please Select gender");
        return false;   
    }
    //Postal code empty or not
    if(form.postalCode.value=="")
    {
        alert("Filled the Postal Code Field");
        form.postalCode.focus();
        return false;
    }
}

</script>

Answer 5

Check It


 var sel=document.getElementById('Forex').value;
 var binary=document.getElementById('Binary').value; 



if(sel.match("Forex")){
      document.getElementById('error').innerHTML = "Choose Forex Workshop Date";
      document.getElementById('Forex').style.borderColor = "red";
      return false;
 }else{
     document.getElementById('error').innerHTML = "";
     document.getElementById('Forex').style.borderColor = "green";
 }
if(binary.match("Binary")){
      document.getElementById('error').innerHTML = "Choose Forex Workshop Date";
      document.getElementById('Binary').style.borderColor = "red";
      return false;
 }else{
     document.getElementById('error').innerHTML = "";
     document.getElementById('Binary').style.borderColor = "green";
 }

Javascript下拉菜单验证

5 个答案: