Java Script Drop Down Menu Validation

Question

Ok I have a drop down menu that is dynamically generated by PHP and populated with data fetched from database. Frontally this works vert well, The problem that I am having is with a JS validation, am not so good with JavaScript ('Dislike it'), but for the purposes of my mini project I have to work with it anyway....

The problem is that with JS I am checking if a user has selected one of the options available in drop down menu is so the form can be submitted else display a warning.

So what I am trying to do is this.....Give a value="f" to the first option which displays "PLEASE SELECT workshop" so if at the submission of the form the value of this drop down menu == f return false else submit the form.

now if at the submission the value ==f the error is displayed but if the value is not == f and i select one of the values from drop down menu i cannot proceed with the submission its does not allow me

PHP code:

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";
 }

OK guys combination of many very helpful answers have helped but when I add another drop down menu like

PHP code:

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

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

The problem becomes that The Inner HTML message displays only for forex and get twisted around i.e. if forex is not selected it shows the message choose forex workshop if i choose the forex workshop it then shows choose binary workshop :D

Answer 1

You are not using 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

i have done javaScript drop-down validation .when in drop down value is "select one" in that time give you messages "please select your value ".My hole project in github .Project link is Javascript drop-down value validation

Answer 3

you have to use drop down Id 'Forex' for get the selected value of drop down not option id, like below

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

Answer 4

Html Code

<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";
 }