Using JavaScript to Show/Hide multiple fields on the same form with same id name

2
votes

I have to fields on the same Dynamics CRM form. One is Account Name and the other field is Company. They both share the same field id name which is parentcustomerid. I need to show/hide these fields based on the value of an option set of another field. I can get the Account name field to show/hide but the Company field will not show/hide.

function showHideSourceField() {

var type = Xrm.Page.data.entity.attributes.get("new_type").getValue();
var source = Xrm.Page.ui.controls.get("new_source");
var accountname = Xrm.Page.ui.controls.get("parentcustomerid");
var company = Xrm.Page.ui.controls.get("parentcustomerid");

//Type of Contact is Unaffiliated
if (type == 100000004) {

    source.setVisible(true);
    accountname.setVisible(false);
    company.setVisible(false);
2
javascriptformsdynamics-crmcrmshow-hide
You can't reuse the same id in HTML elements – Dave
Is the name or class name different? – Ason
Please show us what you have done. also it's a bad practice assigning more than one element same Id, use class instead – Diamond
Show us the HTML code. – Ason
Am I missing something? He isn't creating the html. If anyone is guilty of creating two elements with the same id it's Microsoft, and there's really nothing he can do about that particular issue. – shieldstroy

2 Answers

4
votes

You have two possibilities:

1) They are two different fields, and you can simply check this in the form editor, for example one is name the other is parentcustomerid

2) They are the same field added twice to the form, this is possible inside Dynamics CRM, in this case the first field is parentcustomerid an the second is parentcustomerid1, and you can still check if it is the same field inside the form editor.

-1
votes

You mean same name attribute?

In Html you use:

  • id to provide a unique identifier.
  • class to provide a group/type/etc

I think the best solution for this is to provide a distinct name for each and use the same class for both. 

<input id="account-name" class="parentcustomer" name="account" />
<input id="company" class="parentcustomer" name="company" />

Then you can:

$('.parentcustomer').hide();
$('.parentcustomer').show();