On a Web Form I have a dropdown menu control and next to it a label with input field. I have used JavaScript and hidden the label and input field. This works fine. What I want to happen is that if a user selects the value "Other" from the dropdown menu, the hidden label/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 produce the error? I have tried using 'DOMContentLoaded' on both the window and document in the hopes that the function would be ignored until after the form was loaded 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.
Solved! Go to Solution.
Hi,
Can you add below code in Web Form javascript section:
$(document).ready(function(){
$("#cr646_patientcountryoforigin").change(function () {
// Get value of your trigger field
let currentVal = $("#cr646_patientcountryoforigin option:selected").val();
//do some validation
if(currentVal == "459490001") {
$('table.section > tbody > tr').eq(2).children('td').eq(2).show();
} else {
}
});
});
Hi,
Can you add below code in Web Form javascript section:
$(document).ready(function(){
$("#cr646_patientcountryoforigin").change(function () {
// Get value of your trigger field
let currentVal = $("#cr646_patientcountryoforigin option:selected").val();
//do some validation
if(currentVal == "459490001") {
$('table.section > tbody > tr').eq(2).children('td').eq(2).show();
} else {
}
});
});
Hi @hardikv,
That did it! Thanks! I guess I'm going to have to brush up on my JavaScript. It's been awhile.
Hi, Great! Can you please mark as solution? So, this answer can be helpful to someone.
Thanks!
Done. Thanks again
The first Microsoft-sponsored Power Platform Conference is coming in September. 100+ speakers, 150+ sessions, and what's new and next for Power Platform.
User | Count |
---|---|
8 | |
3 | |
2 | |
1 | |
1 |