[SalesForce] How to display/hide fields in Lightning component using Javascript

I have a form in lightning component. Here are the two fields on the form

 <lightning:select aura:id="whoRequestedTheEvent" required="true" label="Is 
      this event being requested by XYZ">

      <option value="1">No</option>
      <option value="2">Yes</option>

  </lightning:select>


  <lightning:input aura:id="eventform" label="Which Element?"
                   name="eventname" value=" 
   {!v.case.Which__Element__c}" required="true"/>

The above picklist with the label="Is this event being requested by XYZ" has two values: Yes/No. The default picklist value displayed on the page is 'No' and the field with the label "Which Element" should be hidden. As soon as the user selects the value 'Yes' in the picklist, the field "Which element" should display asking user to enter something, but otherwise it should be hidden as long as the picklist value is No. I am a freshbie and need help with Javascript function that does this. Basically need help in completing the following code

    ({
myAction : function(component, event, helper) {

    }
 })

Best Answer

While you can certainly show and hide fields using JavaScript, it's usually more idiomatic in Lightning to allow the framework to handle conditional rendering using <aura:if> expressions built around the values of your attributes.

Here's a quick example of how to show and hide fields idiomatically in a Lightning component. This is an abbreviated example that's meant to show the structure, not a working component! I'd encourage adapting this type of structure to your specific needs.

<aura:component>
    <aura:attribute name="industry" type="String" default="Education" />
    <aura:attribute name="otherIndustry" type="String" />

    <lightning:select name="select1" label="What industry?" value="{! v.industry }">
        <option value="Education">Education</option>
        <option value="Finance">Financial Services</option>
        <option value="Sports">Sports and Recreation</option>
        <option value="Other">Other</option>
    </lightning:select>

    <aura:if isTrue="{! v.industry == 'Other' }">
        <lightning:input label="Other Industry" value="{! v.otherIndustry }" />
    </aura:if>
</aura:component>

What we do here is establish an attribute, industry, to hold the value of the <lightning:select> component, bound via its value attribute.

Then, we wrap another <lightning:input>, which we want to show conditionally, in an <aura:if> component. The <aura:if> includes a bound expression referring to the same attribute to which the select's value is bound. The framework then ensures that updates to these values are recalculated in all of the bound locations and rerenders elements appropriately.

Upshot? If you run this component, you'll find that when you select "Other", the "Other Industry" field appears immediately, no JavaScript client code required, and disappears again when you choose any other option. Let the framework do the work for you.

You can apply exactly the same pattern to your problem.

Further Reading

Related Topic