On a Web Form I have a dropdown menu and next to it a label with text field. I have used JavaScript and hidden the label and text field. This works fine. What I want to happen is that if a user selects the value "Other", the hidden label and text field will appear. The problem is that I receive the above error. I believe that it is happening because the JavaScript is firing prior to the dropdown menu being loaded. The question is, how do I get the JavaScript function to not fire until the dropdown menu is loaded? I have tried using 'DOMContentLoaded' on both the window and document but neither work.
Here is the HTML of the Dropdown menu:
<td colspan="1" rowspan="1" class="clearfix cell picklist-cell">
<div class="info required">
<label for="cr646_patientcountryoforigin" id="cr646_patientcountryoforigin_label">Patient Country of Origin</label>
<div class="validators">
<span id="RequiredFieldValidatorcr646_patientcountryoforigin" style="display:none;">*</span>
</div>
</div>
<div class="control">
<select name="ctl00$ContentContainer$WebFormControl_7379188406a5ea11a812000d3a569fe1$EntityFormView$cr646_patientcountryoforigin" id="cr646_patientcountryoforigin" class="form-control picklist " onchange="setIsDirty(this.id);" required="" aria-invalid="true">
<option value="" label=" "></option>
<option value="459490000">United States</option>
<option value="459490001">Other</option>
<option selected="selected" value="459490002">-- Select --</option>
</select>
</div>
</td>
and here is my JavaScript. I put it In the "Form Options" section of my Web Form Step.
document.addEventListener('DOMContentLoaded', () => {
document.getElementById('#crc646_patientcountryoforigin').addEventListener('change', () => {
console.log('You selected: ', this.value);
/*if(this.value == '459490001') {
$('table.section > tbody > tr').eq(2).children('td').eq(2).show();
}*/
});
});
As you can see, for now I just have it going to the console so I can verify that my value is correct but it doesn't even get that far. Any advice would be appreciated.
