Sometimes in Magento, while creating a custom module we need to add our custom Javascript code in our Admin form. These Admin forms we create are extened from the Magento’s core form widget. So there is a less flexibiliy of adding a custom Javasccript code in such types of Admin forms. What to do if you really need to add some custom Javascripts to give user a better user experience? In this post I’d like to point two conditions how/where to add such custom Javascript codes in the Form class, so that you can give user an interactive Admin form.
The two conditions are:
- If an element of the form already has a value, disable that form element.
- On triggering an event by acting on some form element to change other form’s element’s attribute value.
If an element of the form already has a value, disable that form element
Lets take an example of core’s customer creation Admin form. What we can see while creating a customer from Admin end, the field “Associate to Website” is available to change for the first time. But when you are editing a customer info the very field is disabled. Lets see how this can be acheivable. If you look into
Mage_Adminhtml_Block_Customer_Edit_Tab_Account class you can see the following chunk of code.
[source language=”php”]
if ($customer->getId()) {
$form->getElement(‘website_id’)->setDisabled(‘disabled’);
$form->getElement(‘created_in’)->setDisabled(‘disabled’);
}
[/source]
What this does is checks for the Id of the customer if it is present the form elements disabled attribute is set to disabled. So initially while creating a new customer this condition is not fulfilled while on edition of the customer data the condition is fulfilled and hence the form element
website_id and the
created_in are disabled. This was just an example, you can also write similar conditions for your custom form. Suppose your data for the current form is in
$formData variable and then by checking certain field value you can add similar condition.
[source language=”php”]
$formData=Mage::registry(‘current_custom_data’);
if(!empty($formData->getMyField())){
$targetElement=$form->getElement("my_field");
//For Disabling the field (Value will not be posted on form submit)
$targetElement->setDisabled(‘disabled’);
//Or for making the field readonly
$targetElement->setReadonly(true);
}
[/source]
On triggering an event by acting on some form element to change other form’s element’s attribute value
Lets take the same customer edition page, you can see a checkbox with label
Send auto-generated password. If you check that checkbox then the
New Password textfield above it gets disabled. To get the similar interactivity for custom form you will have to do as following.
[source language=”php”]
$eventElem=$fieldset->addField(‘nocode’, ‘checkbox’, array(
‘label’ => Mage::helper(‘customer’)->__(‘Event Element’),
‘name’ => ‘eventelem’,
‘id’ => ‘eventelem’,
‘value’=>1,
‘onclick’=>’modifyTargetElement(this)’,
));
$eventElem->setAfterElementHtml(‘<script>
function modifyTargetElement(checkboxElem){
if(checkboxElem.checked){
$("target_element").disabled=true;
}
else{
$("target_element").disabled=false;
}
}
</script>’);
[/source]
What you can see is after an element of a form is initiallized you can add HTML codes (which of course for us is only Javascript code) by calling a
setAfterElementHtml method and write the implementation of the function called on the event of the Event element.
I’ve tried to be more explanatory as possible, if you still have any confusion there is always a comment box below. Happy Coding!