Home » Magento7 December 2015

Magento: Show/Hide Admin Form fields using Javascript

Scenario:

In Magento Admin form, you have two fields. One is a select field and let the other field be a text field. Now, you want to show/hide the text field based upon the option selected in the select field.

Solution:

There are two ways to achieve this. You can either use setAfterElementHtml or addFieldMap function.

1) Using setAfterElementHtml function

Suppose, you want to show/hide the following field:

Here is the dropdown/select field. It’s a yes/no field. Suppose, upon selecting ‘Show’, you will need to show the above mentioned field. And, upon selecting ‘Hide’, you will need to hide the above field.

Note the onChange parameter here. It’s calling showHideField() JS function.

Here’s the Javascript function to show/hide field.

The setAfterElementHtml is called which contains Javascript code to show/hide field.

Note: If you want to show/hide any element with a particular class name then you can use the following Javascript code.

2) Using addFieldMap and addFieldDependence functions

Suppose, you want to show/hide the following field:

Here is the dropdown/select field. It’s a yes/no field. Suppose, upon selecting ‘Show’, you will need to show the above mentioned field. And, upon selecting ‘Hide’, you will need to hide the above field.

Now, here is the field map and field dependence functions. The following code indicates that the field “field_to_hide” will be shown when ‘1’ (i.e. ‘Show’ option) is selected in select_field.

Hope this helps. Thanks.

Magento

Get New Post by Email

Find me on

FacebookTwitterGoogle+LinkedInRSS Feed
  • Priya

    Hello it didnt worked for me please help with this