Drop Down Menu Validation JS

Question

I have a dynamically generated drop down menus using PHP, I use these manes on different web pages, Now I also want to add some JS validation to these menus so that the user does not forget to choose an option while filling in a form.

The problem is that my JS code does not work and does not validate my menus, The code looks good to me I have IF statements where they check if the first option value =0 therefore there has not been selection but it still does not work

PHP code:

    $option='<select id="Forex" name="workshop">';
        $option.='<option value="0">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;             
    }

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

    $query2 = mysqli_query($link, $sql2);
        $option2='<select id="Binary" name="workshop">';
        $option2.='<option value="0">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 CODE:

        var workshop=document.getElementById('Binary').value;
    if(workshop==0){
        document.getElementById('Binary').style.borderColor = "red";
        document.getElementById('error').innerHTML = "Please Select Workshop1";
        return false;
    }else{
        document.getElementById('Binary').style.borderColor = "green";
    }

        var workshop2=document.getElementById('Forex').value;
    if(workshop2==0){
        document.getElementById('Forex').style.borderColor = "red";
        document.getElementById('error').innerHTML = "Please Select Workshop";
        return false;
    }else{
        document.getElementById('Forex').style.borderColor = "green";
    }

Answer 1

You have wrongly named the select id/name.

$option='<select id="Forex" name="workshop">'; 

and yet you are trying to access it from JS by calling it by id workshop while the name attribute is workshop not the id.

  var work=document.getElementById('workshop').value; 

The id is Forex not workshop. And you call Forex from different Js line. I think your error is in trying to access a null variable. Unless you have another element with the id workshop that I'm not aware of.