Using the onchange property to trigger Javascript

👨‍💻 Development Help
1

Hi all,

I’m trying to trigger some JavaScript to run in the edit view of a custom module, when the value of a relate field is changed (not saved) but I’m struggling to figure out the correct approach for this and wondered if anyone was able to help point me in the right direction.

The module is a leave request form that relates to another form - Holiday Allowance. The idea being that a member of staff opens a leave request form, selects their holiday allowance form using the relate field and then the system will automatically calculate (via a database call) how much leave they have used and what they have remaining and display the result on the form. I was planning to trigger the database call by using the onchange property to trigger a JavaScript function, which in turn would make a xmlhttprequest.

To add the onchange property to the relate field, I was going to use the customCode element in the field’s metadata. I copied the existing code for the relate field using the web browser dev tools however when I saved the changes, the form did not load. The customCode I added is below to the editviewdefs.php file is below:

          1 => 
          array (
            'name' => 'tcs_holidayallowance_tcs_annualleaverequest_1_name',
            'label' => 'Holiday Year',
            'customCode' => '<div class="col-xs-12 col-sm-8 edit-view-field  yui-ac" type="relate" field="tcs_holidayallowance_tcs_annualleaverequest_1_name">
<input type="text" name="tcs_holidayallowance_tcs_annualleaverequest_1_name" class="sqsEnabled yui-ac-input" tabindex="0" id="tcs_holidayallowance_tcs_annualleaverequest_1_name" size="" value="{$fields.tcs_holidayallowance_tcs_annualleaverequest_1_name.value}" title="" autocomplete="off" onchange="calcALRemaining(this.value)"><div id="EditView_tcs_holidayallowance_tcs_annualleaverequest_1_name_results" class="yui-ac-container"><div class="yui-ac-content" style="display: none;"><div class="yui-ac-hd" style="display: none;"></div><div class="yui-ac-bd"><ul><li style="display: none;"></li><li style="display: none;"></li><li style="display: none;"></li><li style="display: none;"></li><li style="display: none;"></li><li style="display: none;"></li><li style="display: none;"></li><li style="display: none;"></li><li style="display: none;"></li><li style="display: none;"></li></ul></div><div class="yui-ac-ft" style="display: none;"></div></div></div>
<input type="hidden" name="tcs_holida6cdalowance_ida" id="tcs_holida6cdalowance_ida" value="{$fields.tcs_holida6cdalowance_ida.value}">
<span class="id-ff multiple">
<button type="button" name="btn_tcs_holidayallowance_tcs_annualleaverequest_1_name" id="btn_tcs_holidayallowance_tcs_annualleaverequest_1_name" tabindex="0" title="Select" class="button firstChild" value="Select" onclick="open_popup(
&quot;TCS_HolidayAllowance&quot;, 
600, 
400, 
&quot;&quot;, 
true, 
false, 
{&quot;call_back_function&quot;:&quot;set_return&quot;,&quot;form_name&quot;:&quot;EditView&quot;,&quot;field_to_name_array&quot;:{&quot;id&quot;:&quot;tcs_holida6cdalowance_ida&quot;,&quot;name&quot;:&quot;tcs_holidayallowance_tcs_annualleaverequest_1_name&quot;}}, 
&quot;single&quot;, 
true
);"><span class="suitepicon suitepicon-action-select"></span></button><button type="button" name="btn_clr_tcs_holidayallowance_tcs_annualleaverequest_1_name" id="btn_clr_tcs_holidayallowance_tcs_annualleaverequest_1_name" tabindex="0" title="Clear Selection" class="button lastChild" onclick="SUGAR.clearRelateField(this.form, \'tcs_holidayallowance_tcs_annualleaverequest_1_name\', \'tcs_holida6cdalowance_ida\');" value="Clear Selection"><span class="suitepicon suitepicon-action-clear"></span></button>
</span>
<script type="text/javascript">
SUGAR.util.doWhen(
		"typeof(sqs_objects) != \'undefined\' && typeof(sqs_objects[\'EditView_tcs_holidayallowance_tcs_annualleaverequest_1_name\']) != \'undefined\'",
		enableQS
);
</script>
</div>',
          ),

Ultimately, what we’re trying to do is keep the functionality of the relate field, whilst adding the onchange element… Hopefully it is clear what we are attempting to do but if not, please let me know. Likewise, if I’m trying to do something that should be done elsewhere, I’m happy to be pointed in the direction of the right path :slight_smile:

Thanks for looking over this message and any assistance.

Regards

Aaron