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

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.

You want to use the disabled attribute on the select element with id=“dropDown2” and not the nested option element of the select element. Also, in the html, you simply write disabled and not disabled=“disabled” (i.e. <select name="dropDown2" disabled>. Likewise, to make an option as “selected”, you simply write selected within the option element (i.e. <option selected>Select an option</option>).

In the JavaScript section, you have the correct syntax, but you are not referencing valid dropdowns (select elements) using document.getElementById. Why? Because you try to reference dropdown (select) elements with ids of “degreeType” and “selectDegree” and you only have dropdown (select) elements with ids of “dropDown1” and “dropDown2”.

1 Like

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 .

Both of the dropdowns are disabled, because you set them as disabled in your html and with the following JavaScript:

document.getElementById("dropDown1").disabled = true;
document.getElementById("dropDown2").disabled = true;

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>

See my updated comment above your last reply.

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!

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