Validate dropdown list with java script

Question

I have 2 dropdown list, and I want to validate 2 dropdown.

How the code look like?

How I can pass the data if the data is validate?

The JavaScript is inside the HTML code.

JavaScript code:

<script type="text/javaScript">
    function validate_dropdown1() {
        var dropdown = document.getElementById('gender');
        var dropdown1 = document.getElementById('race');
        var gen = document.getElementById("gen");
        var ra = document.getElementById("ra")
        if (dropdown.selectedIndex == 0) {

            gen.innerHTML = "Select gender";
            ra.innerHTML = "Select race";
            dropdown.focus();
            dropdown1.focus();
            return false;
        }
        else {
            gen.innerHTML = "";
            ra.innerHTML = "";
            return true;
        }

    }
</script>

HTML code:

<td align="right">Gender</td>
<td><select name="gender" class="normal_lb_border" id="gender">
        <option value="0" selected>Select gender</option>
        <option value="1">Male</option>
        <option value="2">Female</option>
    </select>

    <label id="gen" style="color: red; font-style: italic;"></label>
    <br><br>
</td>

<td align="right">Race</td>
<td><select name="gender" class="normal_lb_border" id="gender">
        <option value="0" selected>Select gender</option>
        <option value="1">Islam</option>
        <option value="2">Buddha</option>
    </select>

    <label id="gen" style="color: red; font-style: italic;"></label>
    <br><br>
</td>

So I assume you want to validate that both are selected before it can submitted? is this correct? — Maytham Fahmi
– Maytham Fahmi, Commented Aug 14, 2015 at 5:01
There is two aspects here; technical and design. yes it looks ok with technical, but you have to know it can be done different ways. Regarding design part, it all depends on you, your customer and audience satisfaction of the results. If you are not happy for it, when you done with technical part try to play with css, or ask some that has experience with look and design (UI/UX experts) maybe they can give you better answer. Good luck — Maytham Fahmi
– Maytham Fahmi, Commented Aug 14, 2015 at 8:31

mukesh kumar Jangid · Accepted Answer · 2015-08-14 05:38:03Z

You should try this for drop down validation ,It work on Change event

    <!doctype html>
    <html lang="en">
    <head>
     <script type="text/javaScript">
     function validate_dropdown1(){
      var dropdown = document.getElementById('gender');
     var dropdown1 = document.getElementById('race');
     var gen=document.getElementById("gen");
      var ra=document.getElementById("ra")
        if(dropdown.selectedIndex==0){
         gen.innerHTML="Select gender";
           dropdown.focus();
            return false; 
            }
            else if(dropdown.selectedIndex!=0 && dropdown1.selectedIndex==0){
            ra.innerHTML="Select race";
            dropdown1.focus();
            gen.innerHTML="";
             return false;
             }
             else
             {
                gen.innerHTML="";
                ra.innerHTML="";
             }

              }

    </script>
    </head>
    <body>
    <table>
    <tr>
     <td align="right">Gender</td> 
           <td><select name="gender" class="normal_lb_border" id="gender"onchange="validate_dropdown1()">
           <option value="0" selected>Select gender</option>
              <option value="1">Male</option>
              <option value="2">Female</option>
              </select> 

           <label id="gen" style="color: red; font-style: italic;"></label>
              <br><br>
             </td> 
            <td align="right">Race</td> 
             <td><select name="gender" class="normal_lb_border" id="race" onchange="validate_dropdown1()">
           <option value="0" selected>Select race</option>
              <option value="1">Islam</option>
              <option value="2">Buddha</option>
              </select> 
           <label id="ra" style="color: red; font-style: italic;"></label>
              <br><br>
             </td> 
    </tr>
    </table>

    </form>
    </body>
    </html>

Collectives™ on Stack Overflow

Validate dropdown list with java script

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related