cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Jim01
Helper I
Helper I

Cannot read property 'addEventListener' of null at HTMLDocument

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&#32;cell&#32;picklist-cell">
  <div class="info&#32;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&#32;picklist&#32;" onchange="setIsDirty(this.id);" required="" aria-invalid="true">
      <option value="" label="&#32;"></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.

1 ACCEPTED SOLUTION

Accepted Solutions
hardikv
Solution Sage
Solution Sage

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 {
            
        }
    });
 });

View solution in original post

4 REPLIES 4
hardikv
Solution Sage
Solution Sage

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 {
            
        }
    });
 });

View solution in original post

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

Helpful resources

Announcements
UG GA Amplification 768x460.png

Launching new user group features

Learn how to create your own user groups today!

Community Connections 768x460.jpg

Community & How To Videos

Check out the new Power Platform Community Connections gallery!

M365 768x460.jpg

Microsoft 365 Collaboration Conference | December 7–9, 2021

Join us, in-person, December 7–9 in Las Vegas, for the largest gathering of the Microsoft community in the world.

Users online (3,011)