Is it a reliable and valid appraoch to write custom JavaScript against my built-in Create.aspx and Edit.aspx list forms markup

Question

I am working on a new list inside my team site collection. Now the list have the following main fields:-

1. Customer Name. which is a managed metadata column.
2. PM Status column. drop-down list.
3. Approver. which is also a drop-down list.
4. other columns...

now our customer asked us to implement the following inside the list:-

1. based on the customer name field selection, to query a Security Group which have the same name as the customer selected.
2. then populate the Approver list with the returned users.
3. Also another requirement. if the Status = Cancelled or closed. to disable the Approver field.

now if i am working on a regular asp.net (non-sharepoint) web application, these will be a straight forward scenarios that can be implemented using REST API + JavaScript.

but for our create.aspx and edit.aspx list forms, i am not sure how i will be handling this..

now i want to start implementing this scenario, but not sure if it is a valid appraoch:-

1. inside the create.aspx and edit.aspx list forms to add a script editor web part.
2. inside the script editor web part to add the required javascript.
3. now the issue i am afraid of, is that the javascript will be referencing the fields markup ids and/or titles to implement the scenario.
4. For example. i checked the built-in markup for the create.aspx form, where it showed that the customer name metadata field will have the following id CustomerName_$containereditableRegion as follow:- while the status have the following id PMStatus_7d7b4035-d3e4-468e-8894-29905e54b35f_$DropDownChoice and title, as follow:-

and so on. so my question is how reliable and robust my appraoch will be if i depend my JavaScript on these ids and titles,, where i am depending my javascript selectors on elements ids and titles which i do not own.. and could this markup chnage in the future if we install a Cumulative update ?? i am totally lost on how i need to manage these requirements ? For example is using the following selector $("CustomerName_$containereditableRegion").change will always work?

I have noted the following which i am not sure how important is it. I have noted that all the fields' ids start with the field internal name (as show in the customer name & PM status cases)..so could this be something which i can depend on how have a reliable JavaScript selectors ??

Answer 1

Learn to use proper CSS/DOM Selectors:

https://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048

Selectors should work for jQuery as well

You can write (native JavaScript) Selectors to:

• Get an element that * contains a string:

  document.querySelector("[id*='Name']);
  

• Get an element that ^ begins with a string:

  document.querySelector("[id^='CustomerName']);
  

• Get an element that $ ends with a string:

  document.querySelector("[id$='DropDownChoice']);
  

This does not only apply to the ID attribute, but to any data-attribute of a DOM element

https://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048

Is the best URL out there, a must know for any Front-end developer... and then use and memorize all 30 methods