CODEWITHSUNDEEP
javascript
johnmathew21
johnmathew21

Reputation: 51

javascript validate select dropdown

i have a form with javascript validation. there are 3 drop-down(select) fields with questions and 3 input fields with answers.

is there any way to validate the select fields so that they don't have the same question?

here is my code

<script type="text/javascript">
var errmsg;
function validate()
{
var textA= document.getElementById("text1");
var textB= document.getElementById("text2");
var textC = document.getElementById("text3");
var textD = document.getElementById("text4");
var textE = document.getElementById("text5");
var textF = document.getElementById("text6");
var txt1 = document.getElementById("text1").value;
var txt2 = document.getElementById("text2").value;
var txt3 = document.getElementById("text3").value; 
var txt4 = document.getElementById("text4").value;
var txt5 = document.getElementById("text5").value;
var txt6 = document.getElementById("text6").value;
var txt1_len = txt1.length;
var txt2_len = txt2.length;
var txt3_len = txt3.length;
var txt4_len = txt4.length;
var txt5_len = txt5.length;
var txt6_len = txt6.length;

if(txt1_len == '')
{
    errmsg = "Please select a question";
    document.getElementById("ermsg").innerHTML = errmsg;
    textA.focus();
    return false;
}

else if(txt2_len == 0 || txt2_len > 23 || txt2_len < 3)
{
    errmsg = "Invalid Answer";
    document.getElementById("ermsg").innerHTML = errmsg;
    textB.focus();
    return false;
}

else if(txt3_len == '')
{
    errmsg = "Please select a question";
    document.getElementById("ermsg").innerHTML = errmsg;
    textC.focus();
    return false;
}
else if(txt4_len == 0 || txt4_len > 23 || txt4_len < 3)
{
    errmsg = "Invalid Answer";
    document.getElementById("ermsg").innerHTML = errmsg;
    textD.focus();
    return false;
}
else if(txt5_len == '')
{
    errmsg = "Please select a question";
    document.getElementById("ermsg").innerHTML = errmsg;
    textE.focus();
    return false;
}

else if(txt6_len == 0 || txt6_len > 23 || txt6_len < 3)
{
    errmsg = "Invalid Answer";
    document.getElementById("ermsg").innerHTML = errmsg;
    textF.focus();
    return false;
}
else
{
    return true;

}

return false;
}


</script>

and then the html code

https://jsfiddle.net/johnmathew21/ty999fkv/

Upvotes: 5

Views: 129

Answers (2)

Cheezy Code
Cheezy Code

Reputation: 1715

On change of 1st drop down - disable/remove that particular question from other drop downs.

$('#text1').change(function(){
    $('#text2 option[value='+$('#text1').val() +']').attr('disabled',true);
    $('#text3 option[value='+$('#text1').val() +']').attr('disabled',true);
});

something like this will work.

Upvotes: 0

Hasan Daghash
Hasan Daghash

Reputation: 1691

you should compare the text inside each ddl , i add the following condition :

 $('#text1 option:selected').text() === $('#text2 option:selected').text()

working fiddel : here

Upvotes: 1

Related Questions