Javascript HTML drop down validation

Question

i want to be able to add a validation to my dropdown lists. If the user was to select cardiff in the first dropdown(select1) and again in the second dropdown(select2) if should give a alert message to the user saying "destination can't be same as the departure".

I know this isn't user friendly but it needs to be done=S

I was getting issues with the second drop down as it doesn't seem to work as a double AND if statement.

Please use jsfiddle.net to help me thanks.

Departure: <br> 
<select id="select1"> 
    <option value="" disabled selected>Please Select</option>
    <option>Birmingham</option>
    <option>Bristol</option>
    <option>Cardiff</option>
    <option>Liverpool</option>
    <option>London</option>
    <option>Manchester</option>
</select>

<br><br>

Destination: <br>
<select id="select2">
    <option value="" disabled selected>Please Select</option>
    <option>Birmingham</option>
    <option>Bristol</option>
    <option>Cardiff</option>
    <option>Liverpool</option>
    <option>London</option>
    <option>Manchester</option>
</select>

<br><br>

<input type="Button" value="Order Tickets" onClick="myFunction()">

<script>
    function myFunction() 
    {
         if (document.getElementById("select1" && "select2").value == "Cardiff") 
            alert("Destination can't be same as Departure.");
         else
            alert("That's Fine");  
    }
</script>

What the hell is this? document.getElementById("select1" && "select2") That's equal than document.getElementById("select2") — Marcos Pérez Gude
– Marcos Pérez Gude, Commented Nov 13, 2015 at 11:47
You seem to know how to select a single element. Compare the values of two such elements. Forget Cardiff, this has nothing to do with Cardiff. — David Hedlund
– David Hedlund, Commented Nov 13, 2015 at 11:48
@MarcosPérezGude OP is obviously having trouble and doesn't quite understand the if and or getElementById. — Kieran Quinn
– Kieran Quinn, Commented Nov 13, 2015 at 11:50
@Imraanstack2 put this in your javascript console: "select1" && "select2". What result is? And getElementById() it's a method, or a function, call it as you want, and you can`t make an AND statement inside — Marcos Pérez Gude
– Marcos Pérez Gude, Commented Nov 13, 2015 at 12:03

ojovirtual · Accepted Answer · 2015-11-13 11:48:48Z

2

You need to get the values of both selects.

var one=document.getElementById("select1");
var two=document.getElementById("select2");

if (one.options[one.selectedIndex].value == two.options[two.selectedIndex].value)
    alert("Destination can't be same as Departure");

answered Nov 13, 2015 at 11:48

ojovirtual

3,36219 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sanjay Kumar N S · Accepted Answer · 2015-11-13 11:49:41Z

Its better to use unique names as option values.

Departure: <br> 
<select id="select1"> 
<option value="" disabled selected>Please Select</option>
    <option value="1">Birmingham</option>
    <option value="2">Bristol</option>
    <option value="3">Cardiff</option>
    <option value="4">Liverpool</option>
    <option value="5">London</option>
    <option value="6">Manchester</option>
</select><br><br>

Destination: <br>
<select id="select2">
<option value="" disabled selected>Please Select</option>
    <option value="1">Birmingham</option>
    <option value="2">Bristol</option>
    <option value="3">Cardiff</option>
    <option value="4">Liverpool</option>
    <option value="5">London</option>
    <option value="6">Manchester</option>
</select><br><br>

    <input type="Button" value="Order Tickets" onClick="myFunction()">

<script>

function myFunction() {

 if (document.getElementById("select1").value == document.getElementById("select2").value) 
    alert("Destination can't be same as Departure.");

 else
     alert("That's Fine");  
}
</script>

Rémi Becheras · Accepted Answer · 2015-11-13 11:49:42Z

0

function myFunction() {

 if (document.getElementById("select1").value === "Cardiff" && document.getElementById("select2").value === "Cardiff") 
    alert("Destination can't be same as Departure.");

 else
     alert("That's Fine");  
}

or better :

function myFunction() {

 if (document.getElementById("select1").value === document.getElementById("select2").value) 
    alert("Destination can't be same as Departure.");

 else
     alert("That's Fine");  
}

answered Nov 13, 2015 at 11:49

Rémi Becheras

15.3k14 gold badges55 silver badges85 bronze badges

Comments

Burki · Accepted Answer · 2015-11-13 11:49:44Z

0

Replace

if (document.getElementById("select1" && "select2").value == "Cardiff")

with

if (document.getElementById("select1").value == document.getElementById("select1").value ) {
    ...
}

Also, you would be better off if you stripped the departure from the destination list. But the code in your question sounds like that is a bit too much for your current skills.

answered Nov 13, 2015 at 11:49

Burki

1,22622 silver badges30 bronze badges

Comments

Ajit Kumar Singh · Accepted Answer · 2015-11-13 11:56:42Z

0

I have updated your JavaScript. Here's the code.

function myFunction() {
    var dest1 = document.getElementById("select1").value;
    var dest2 = document.getElementById("select2").value;
 if (dest1 === dest2) 
    alert("Destination can't be same as Departure.");
 else
    alert("That's Fine");  
}

answered Nov 13, 2015 at 11:56

Ajit Kumar Singh

3572 silver badges11 bronze badges

Collectives™ on Stack Overflow

Javascript HTML drop down validation

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related