show alert if two same value choosen

[mchoudhury]

Hi guys,
I have three drop down list. Inside them i have three value each three has the same data inside.
I'm trying to write a JS function where if a user selects say value 1 fron drop down list one and again chooses value one from either drop down2 or drop down3 then an alert box should show up alerting that this value has already been chosen.

This is my code for the drop down list:

<div id="pnlinternalcountries" style="DISPLAY: none">

<select name="Country1" id="Country1" style="width:200px;">
<option value="0">Select a Country...</option>
<option value="1">Antigua</option>
<option value="2">Belgium</option>
<option value="3">China</option>

</select>

<p><select name="Country2" id="Country2" style="width:200px;">
<option value="0">Select a Country...</option>
<option value="1">Antigua</option>
<option value="2">Belgium</option>
<option value="3">China</option>

</select>

<p><select name="Country3" id="Country3" style="width:200px;">
<option value="0">Select a Country...</option>
<option value="1">Antigua</option>
<option value="2">Belgium</option>
<option value="3">China</option>

</select>

how can write a javascript function that will produce this outcome.

thanks

 

[ayanroy]

write a function and call the function on onChange event handler in the dropdown lists.



Ayan Kumar Roy
India

 

[mchoudhury]

Hi guys,
I wrote this function but cant seem to get this functioning with my coding:

function validate(theForm){
//If a country is selected, the user must select some amount of mimutes per month
var d = document.Form1;
for (var z=1;z<4;z++){
var selValueX = d["selCountry"+x].options[d["selCountry"+x].selectedIndex].value;
var selValueZ = d["selCountry"+z].options[d["selCountry"+z].selectedIndex].value;
if (selValueX==selValueZ && z!=x && eval(z)!=1){
alert("You may only select a country once.");
d["selCountry"+z].focus();
return false;
}else{
return true;
}}}

Can someone see what else i need to do to make sure this functions acordinly.

Thanks
Mac

 

[tsuji]

mchoudhury,

If there are only three selects, I would be content with expliciting them. Something like this?
[tt]
function validate(theForm) {
var sel_1=theForm.elements['Country1'].value;
var sel_2=theForm.elements['Country2'].value;
var sel_3=theForm.elements['Country3'].value;
if ((sel_1=="0")||(sel_2=="0")||(sel_3=="0")
||(sel_1==sel_2)||(sel_2==sel_3)||(sel_3==sel_1)) {
alert("You may only select a country once.");
return false;
} else {
return true;
}
}
[/tt]
regards - tsuji

 

[mchoudhury]

Hi tsuji

I've done what u dictated above, but still no luck. Do i have to do anhything to my <select name="Country1" id="Country1" style="width:200px;">
code, i.e add the onFocus attribute or anything else which u could think of.

Thank You
Mac

 

[tsuji]

mchoudhury,

The only thing you have to do is to add those to you validation function, such as handling the submit event etc. To validate (say via a change event) each select tag would be quite annoying as the user might have yet to select from the other lists.

The minimal would be this.
[tt]
<input type=submit onclick="validate(this.form)">
[/tt]
within the form that you probably have similar thing one form or the other---that's what the conclusion I drew from looking at your function construction named validate(theForm).

- tsuji