Disable an input field if second input field is not filled out

JavaScript
1

Hey guys! I am completely new to js. Like last month new. i currently have two fields. I’d like to disable the second field until the first one is filled out. Any help would be greatly appreciated. Thanks!

Here is what i am working on.

3

Thanks randall! i have referenced document.getElementbyId with the correct id but now the drop down menu’s are unresponsive. Sorry, very new to js lol
As for the disabled="disabled" i thought this would allow me to select anything the dropdown present BUT the first generic option Select an option .

5

Try looking now. <label for="degreeType">What Degree would you like?*</label> <select id="dropDown1" name="dropDown1" disabled> <option id="dropDown1" selected="selected">Select an option</option>

7

Ok i just took off disabled for html and enabled with java. I am able to select both drop downs but I want the second dropdown disabled until the first once has an answer/filled in.
If you see once dropDown2 has been filled i can no longer change that answer.

Update: i managed to get it working. However, once i have selected a response for both dropdowns i am free to go through dropDown2's options even when dropDown1 is back to its default.
Thank you for your help randell!

9

If you add a value=“” to both dropDown1’s first option and dropDown2’s first option, then you could go with something like below (click on the blur).

var dis1 = document.getElementById("dropDown1");
var dis2 = document.getElementById("dropDown2");
dis1.disabled = false; // alternatively you could just put disabled in the html element
dis1.onchange = function () {
   dis2.value = ""; // resets value back to ""
   dis2.disabled = !this.value; // disables dropDown2 if dropDown1 value is not ""; otherwise, enables dropDown2
}
1 Like