CODEWITHSUNDEEP
htmlformsselectdrop-down-menu
razvee
razvee

Reputation: 1

Form with drop-down lists

I have a HTML form in my script with some drop-down lists. For example:

<select name="1">
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
</select>


<select name="2">
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
</select>

As you can see, the options in the both lists are identical. What I should do, to stop the user selecting the same option? For example, if the user selects option "b" from list "1", and then tries to select option "b" from list "2", I want the selected option from list "1" to disappear, so the user can't submit the same values...

Sorry for my english. I hope I made myself clear...

Upvotes: 0

Views: 1096

Answers (2)

Steven Bell
Steven Bell

Reputation: 1989

You can validate the form to do this.

Tested Working Code:

    <html>
<head>

<script>
//put this javascript function in the header. this validates the from one you click the submit button
function validateForm() {
    var x = document.forms["myForm"]["box1"].value;//this is the selection of dropdown box 1
    var y = document.forms["myForm"]["box2"].value;//this is the selection of dropdown box 2
    if (x == y) {//use the if statement to check if the selection are the same 
        alert("Selection Cannot Be the Same");//error message
        return false;
    }
}
</script>

</head>

<body>

<form name="myForm" action=""
onsubmit="return validateForm()" method="">
<!--onsubmit calls the function once the submit button is clicked-->

<select name="box1">
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
</select>

<select name="box2">
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
</select>

<input type="submit" value="Submit">
</form>

</body>
</html>

Upvotes: 1

akame
akame

Reputation: 671

You could submit the form when one list option is selected and redisplay with the reduced list of options.

Upvotes: 0

Related Questions