2. ASPRunner.NET General questions
  3. Slow form changes with JavaScript OnLoad Events
This topic is locked

Slow form changes with JavaScript OnLoad Events

 		8/27/2025 10:58:54 AM
ASPRunner.NET General questions
M
 MSchell author

I'm experiencing some really slow response time 10 seconds when selectons of a form are made,

This form has 6 options, some can be seleted together, some can't, and depending on the options selected some fields don't appear, some have required validation turned on and off.

Overall, this code is responsible for managing the visibility and behavior of various form controls based on the user's input and role. It ensures that the form behaves as expected and that certain information is protected from being modified by the user.

Is there a way to speed the response up?

var PTFTrackingNumber = Runner.getControl(pageid, 'PTFTrackingNumber');
var Name = Runner.getControl(pageid, 'Name');
var EMPLID = Runner.getControl(pageid, 'EMPLID');
var EffectiveDate = Runner.getControl(pageid, 'EffectiveDate');
var RetroEffectiveDateGT60 = Runner.getControl(pageid, 'RetroEffectiveDateGT60');
var PosFilledOutsidePosting = Runner.getControl(pageid, 'PosFilledOutsidePosting');
var PlaceOnPaidAdminLeave = Runner.getControl(pageid, 'PlaceOnPaidAdminLeave');
var PlaceOnUnpaidLeave = Runner.getControl(pageid, 'PlaceOnUnpaidLeave');
var Relocation = Runner.getControl(pageid, 'Relocation');
var PositionNumber = Runner.getControl(pageid, 'PositionNumber');
var SupvName = Runner.getControl(pageid, 'SupvName');
var MailUnit = Runner.getControl(pageid, 'MailUnit');
var SupvPositionNumber = Runner.getControl(pageid, 'SupvPositionNumber');
var Jobcode = Runner.getControl(pageid, 'Jobcode');
var JobTitle = Runner.getControl(pageid, 'JobTitle');
var JobStepIfUnion = Runner.getControl(pageid, 'JobStepIfUnion');
var NewAnnualSalary = Runner.getControl(pageid, 'NewAnnualSalary');
var NewHourlySalary = Runner.getControl(pageid, 'NewHourlySalary');
var TestingDOT_FMCSA = Runner.getControl(pageid, 'TestingDOT_FMCSA');
var Testing_CIP = Runner.getControl(pageid, 'Testing_CIP');
var Testing_FFD = Runner.getControl(pageid, 'Testing_FFD');
var Testing_Other = Runner.getControl(pageid, 'Testing_Other');
var InitiatingManagerName = Runner.getControl(pageid, 'InitiatingManagerName');
var InitiatingManagerEmplID = Runner.getControl(pageid, 'InitiatingManagerEmplID');
var InitiatingManagerEmail = Runner.getControl(pageid, 'InitiatingManagerEmail');
var InitiatingManagerApprovalDate = Runner.getControl(pageid, 'InitiatingManagerApprovalDate');
var InitiatingManagerTitle = Runner.getControl(pageid, 'InitiatingManagerTitle');
var InitiatingManagerApproval = Runner.getControl(pageid, 'InitiatingManagerApproval');
var SecondLevelName = Runner.getControl(pageid, 'SecondLevelName');
var SecondLevelEmplID = Runner.getControl(pageid, 'SecondLevelEmplID');
var SecondLevelEmail = Runner.getControl(pageid, 'SecondLevelEmail');
var SecondLevelApprovalDate = Runner.getControl(pageid, 'SecondLevelApprovalDate');
var SecondLevelTitle = Runner.getControl(pageid, 'SecondLevelTitle');
var SecondLevelApproval = Runner.getControl(pageid, 'SecondLevelApproval');
var Comments = Runner.getControl(pageid, 'Comments');
var DepartmentCode = Runner.getControl(pageid, 'DepartmentCode');
var Phyloc = Runner.getControl(pageid, 'PhysicalLocation');
var ResCode = Runner.getControl(pageid, 'ResourceCode');
var ActCode = Runner.getControl(pageid, 'ActivityCode');
var BusinessUnit = Runner.getControl(pageid, 'BusinessUnit');
var ProjectCode = Runner.getControl(pageid, 'ProjectCode');
var EarningsCode = Runner.getControl(pageid, 'EarningsCode');
var Relocation_String = Runner.getControl(pageid, 'Relocation_String');
var UpdatedByUserID = Runner.getControl(pageid, 'UpdatedByUserID');
var LastUpdateTime = Runner.getControl(pageid, 'LastUpdateTime');
var InitatingManagerUserID = Runner.getControl(pageid, 'InitatingManagerUserID');
var SecondLevelUserID = Runner.getControl(pageid, 'SecondLevelUserID');
var PTFStatus = Runner.getControl(pageid, 'PTFStatus');
var Cancelled = Runner.getControl(pageid, 'Cancelled');
var Processed = Runner.getControl(pageid, 'Processed');
var Compliance = Runner.getControl(pageid, 'Compliance');
var RelocationCompleted = Runner.getControl(pageid, 'RelocationCompleted');
var PTFNumber = Runner.getControl(pageid, 'PTFNumber');
var InitiatingManagerEmailSentDate = Runner.getControl(pageid, 'InitiatingManagerEmailSentDate');
var SecondManagerEmailSentDate = Runner.getControl(pageid, 'SecondManagerEmailSentDate');
var ComplianceEmailSentDate = Runner.getControl(pageid, 'ComplianceEmailSentDate');
var VPName = Runner.getControl(pageid, 'VPName');
var VPEmail = Runner.getControl(pageid, 'VPEmail');
var VPUserID = Runner.getControl(pageid, 'VPUserID');
var VPTitle = Runner.getControl(pageid, 'VPTitle');
var VPApproval = Runner.getControl(pageid, 'VPApproval');
var VPApprovalDate = Runner.getControl(pageid, 'VPApprovalDate');
var VPEmailSentDate = Runner.getControl(pageid, 'VPEmailSentDate');
var VP_Name = Runner.getControl(pageid, 'VP_Name');
var CreatedBy = Runner.getControl(pageid, 'CreatedBy');
var RelocationPerDiem = Runner.getControl(pageid, 'RelocationPerDiem');
var RelocationPerDiemComments = Runner.getControl(pageid, 'RelocationPerDiemComments');
var VP_Email = Runner.getControl(pageid,'vp_email');

//Hide hese fields until Relocation Option is Selected

pageObj.hideField("DepartmentCode");
pageObj.hideField("ResourceCode");
pageObj.hideField("BusinessUnit");
pageObj.hideField("EarningsCode");
pageObj.hideField("PhysicalLocation");
pageObj.hideField("ActivityCode");
pageObj.hideField("ProjectCode");

//when Retro Effective Date is selected

RetroEffectiveDateGT60.on('change', function(e) {
if (this.getValue() === 'on'){
RelocationPerDiem.clear();
PlaceOnUnpaidLeave.clear();
PlaceOnPaidAdminLeave.clear();
pageObj.showField("PositionNumber");
pageObj.showField("MailUnit");
pageObj.showField("Jobcode");
pageObj.showField("SupvName");
pageObj.showField("SupvPositionNumber");
pageObj.showField("JobTitle");
pageObj.showField("JobStepIfUnion");
pageObj.showField("NewAnnualSalary");
pageObj.showField("NewHourlySalary");
}});

//when Position is filled outside of posting is selected

PosFilledOutsidePosting.on('change', function(e) {
if (this.getValue() === 'on'){
RelocationPerDiem.clear();
PlaceOnUnpaidLeave.clear();
PlaceOnPaidAdminLeave.clear();
pageObj.showField("PositionNumber");
pageObj.showField("MailUnit");
pageObj.showField("Jobcode");
pageObj.showField("SupvName");
pageObj.showField("SupvPositionNumber");
pageObj.showField("JobTitle");
pageObj.showField("JobStepIfUnion");
pageObj.showField("NewAnnualSalary");
pageObj.showField("NewHourlySalary");
pageObj.hideField("DepartmentCode");
pageObj.hideField("ResourceCode");
pageObj.hideField("BusinessUnit");
pageObj.hideField("EarningsCode");
pageObj.hideField("PhysicalLocation");
pageObj.hideField("ActivityCode");
pageObj.hideField("ProjectCode");
DepartmentCode.removeValidation("IsRequired");
ResCode.removeValidation("IsRequired");
BusinessUnit.removeValidation("IsRequired");
EarningsCode.removeValidation("IsRequired");
Phyloc.removeValidation("IsRequired");
ActCode.removeValidation("IsRequired");
ProjectCode.removeValidation("IsRequired");
DepartmentCode.setValue('');
ResCode.setValue('');
EarningsCode.setValue(Relocation.getValue());
BusinessUnit.setValue('');
Phyloc.setValue('');
ProjectCode.setValue('');
}});

//When Paid Administrative Leave is selected

PlaceOnPaidAdminLeave.on('change', function(e) {
if (this.getValue() === 'on'){
PlaceOnUnpaidLeave.clear();
RelocationPerDiem.clear();
PosFilledOutsidePosting.clear();
pageObj.hideField("VPName");
pageObj.hideField("VPEmail");
pageObj.hideField("VPUserID");
pageObj.hideField("VPTitle");
pageObj.hideField("VPApprovalDate");
pageObj.hideField("VPApproval");

//If Paid is not selected remove these values if present

VPName.setValue('');
VPEmail.setValue('');
VPUserID.setValue('');
VPTitle.setValue('');
VPApproval.setValue('');
VPApprovalDate.setValue('');

}});

//When Un Paid Administrative Leave is selected

// If Unpaid is not selected, hide these fields
if (proxy.PlaceOnUnpaidLeave != 1)
{
pageObj.hideField("VPName");
pageObj.hideField("VPEmail");
pageObj.hideField("VPUserID");
pageObj.hideField("VPTitle");
pageObj.hideField("VPApprovalDate");
pageObj.hideField("VPApproval");

}
else
{
pageObj.showField("VPName");
pageObj.showField("VPEmail");
pageObj.showField("VPUserID");
pageObj.showField("VPTitle");
pageObj.showField("VPApprovalDate");
pageObj.showField("VPApproval");
}

PlaceOnUnpaidLeave.on('change', function(e) {
if (this.getValue() === 'on') {
PlaceOnPaidAdminLeave.clear();
pageObj.showField("VPName");
pageObj.showField("VPEmail");
pageObj.showField("VPUserID");
pageObj.showField("VPTitle");
pageObj.showField("VPApprovalDate");
pageObj.showField("VPApproval");
pageObj.hideField("PositionNumber");
pageObj.hideField("MailUnit");
pageObj.hideField("Jobcode");
pageObj.hideField("SupvName");
pageObj.hideField("SupvPositionNumber");
pageObj.hideField("JobTitle");
pageObj.hideField("JobStepIfUnion");
pageObj.hideField("NewAnnualSalary");
pageObj.hideField("NewHourlySalary");
RelocationPerDiem.clear();
PosFilledOutsidePosting.clear();
} else {
pageObj.hideField("VPName");
//pageObj.hideField("VPName1");
pageObj.hideField("VPEmail");
pageObj.hideField("VPUserID");
pageObj.hideField("VPTitle");
pageObj.hideField("VPApprovalDate");
pageObj.hideField("VPApproval");
pageObj.showField("PositionNumber");
pageObj.showField("MailUnit");
pageObj.showField("Jobcode");
pageObj.showField("SupvName");
pageObj.showField("SupvPositionNumber");
pageObj.showField("JobTitle");
pageObj.showField("JobStepIfUnion");
pageObj.showField("NewAnnualSalary");
pageObj.showField("NewHourlySalary");

//If UnPaid is not selected remove these values if present

VPName.setValue('');
VPEmail.setValue('');
VPUserID.setValue('');
VPTitle.setValue('');
VPApproval.setValue('');
VPApprovalDate.setValue('');

}
});

//When Per Diem is selected

//Show fields if Per Diem is selected Begin
RelocationPerDiem.on('change', function(e) {
if (this.getValue() === 'on') {
PlaceOnPaidAdminLeave.clear();
PlaceOnUnpaidLeave.clear();
PosFilledOutsidePosting.clear();
PosFilledOutsidePosting.clear();
Relocation.clear();
TestingDOT_FMCSA.clear();
Testing_CIP.clear();
Testing_FFD.clear();
Testing_Other.clear();

pageObj.showField("DepartmentCode");
pageObj.showField("ResourceCode");
pageObj.showField("BusinessUnit");
pageObj.showField("EarningsCode");
pageObj.showField("PhysicalLocation");
pageObj.showField("ActivityCode");
pageObj.showField("ProjectCode");
DepartmentCode.addValidation("IsRequired");
ResCode.addValidation("IsRequired");
BusinessUnit.addValidation("IsRequired");
EarningsCode.addValidation("IsRequired");
Phyloc.addValidation("IsRequired");
ActCode.addValidation("IsRequired");
ProjectCode.addValidation("IsRequired");
pageObj.hideField("VPName");
pageObj.hideField("VP_Name");
pageObj.hideField("VPEmail");
pageObj.hideField("VPUserID");
pageObj.hideField("VPTitle");
pageObj.hideField("VPApprovalDate");
pageObj.hideField("VPApproval");
//if the relocation option is not selected hide these fields, and remove is required validation.
} else {
pageObj.hideField("DepartmentCode");
pageObj.hideField("ResourceCode");
pageObj.hideField("BusinessUnit");
pageObj.hideField("EarningsCode");
pageObj.hideField("PhysicalLocation");
pageObj.hideField("ActivityCode");
pageObj.hideField("ProjectCode");
DepartmentCode.removeValidation("IsRequired");
ResCode.removeValidation("IsRequired");
BusinessUnit.removeValidation("IsRequired");
EarningsCode.removeValidation("IsRequired");
Phyloc.removeValidation("IsRequired");
ActCode.removeValidation("IsRequired");
ProjectCode.removeValidation("IsRequired");
DepartmentCode.setValue('');
ResCode.setValue('');
EarningsCode.setValue(Relocation.getValue());
BusinessUnit.setValue('');
Phyloc.setValue('');
ProjectCode.setValue('');
}
});
//End Show Fields if Per Diem is selected

//Watch the Relocation option, if selected then show the fields on the page, and make them required.

Relocation.on('change', function(e) {
if (this.getValue() === 'on') {
RelocationPerDiem.clear();
PlaceOnUnpaidLeave.clear();
pageObj.showField("DepartmentCode");
pageObj.showField("ResourceCode");
pageObj.showField("BusinessUnit");
pageObj.showField("EarningsCode");
pageObj.showField("PhysicalLocation");
pageObj.showField("ActivityCode");
pageObj.showField("ProjectCode");
DepartmentCode.addValidation("IsRequired");
ResCode.addValidation("IsRequired");
BusinessUnit.addValidation("IsRequired");
EarningsCode.addValidation("IsRequired");
Phyloc.addValidation("IsRequired");
ActCode.addValidation("IsRequired");
ProjectCode.addValidation("IsRequired");
pageObj.showField("PositionNumber");
pageObj.showField("MailUnit");
pageObj.showField("Jobcode");
pageObj.showField("SupvName");
pageObj.showField("SupvPositionNumber");
pageObj.showField("JobTitle");
pageObj.showField("JobStepIfUnion");
pageObj.showField("NewAnnualSalary");
pageObj.showField("NewHourlySalary");
//if the relocation option is not selected hide these fields, and remove is required validation.
} else {
pageObj.hideField("DepartmentCode");
pageObj.hideField("ResourceCode");
pageObj.hideField("BusinessUnit");
pageObj.hideField("EarningsCode");
pageObj.hideField("PhysicalLocation");
pageObj.hideField("ActivityCode");
pageObj.hideField("ProjectCode");
DepartmentCode.removeValidation("IsRequired");
ResCode.removeValidation("IsRequired");
BusinessUnit.removeValidation("IsRequired");
EarningsCode.removeValidation("IsRequired");
Phyloc.removeValidation("IsRequired");
ActCode.removeValidation("IsRequired");
ProjectCode.removeValidation("IsRequired");
DepartmentCode.setValue('');
ResCode.setValue('');
EarningsCode.setValue(Relocation.getValue());
BusinessUnit.setValue('');
Phyloc.setValue('');
ProjectCode.setValue('');
}
});

//Use the Proxy userid to determine if the logged in user is one of the approvers, if they are, their approval options will be displayed
//if they are not one of the approvers, then the dields are not displayed.

var approver1 = Runner.getControl(pageid,'InitiatingManagerApproval');
var InitiatingManagerApprovalDate = Runner.getControl(pageid,'InitiatingManagerApprovalDate');

if(proxy['Approver1'] == "Approver1UserID")
{

}
else
{
approver1.makeReadonly();
InitiatingManagerApprovalDate.makeReadonly();
}

var approver2 = Runner.getControl(pageid,'SecondLevelApproval');
var SecondLevelApprovalDate = Runner.getControl(pageid,'SecondLevelApprovalDate');

if(proxy['Approver2'] == "Approver2UserID")
{

}
else
{

approver2.makeReadonly()
SecondLevelApprovalDate.makeReadonly()

}

//This code prevents the user from selecting 2 options that are not compatible

//This code prevents a user from changing any data returned about a person by making these fields read only.

var IMgrName = Runner.getControl(pageid,'InitiatingManagerName');
IMgrName.makeReadonly();
var IMgrEmail = Runner.getControl(pageid,'InitiatingManagerEmail');

IMgrEmail.makeReadonly();
var IMgrID = Runner.getControl(pageid,'InitiatingManagerEmplID');
IMgrID.makeReadonly();
var IMgrUID = Runner.getControl(pageid,'InitatingManagerUserID');
IMgrUID.makeReadonly();
var IMgrTitle = Runner.getControl(pageid,'InitiatingManagerTitle');
IMgrTitle.makeReadonly();
var SLName = Runner.getControl(pageid,'SecondLevelName');
SLName.makeReadonly();
var SLEmail = Runner.getControl(pageid,'SecondLevelEmail');
SLEmail.makeReadonly();
var SLID = Runner.getControl(pageid,'SecondLevelEmplID');
SLID.makeReadonly();
var SLTitle = Runner.getControl(pageid,'SecondLevelTitle');
SLTitle.makeReadonly();
var SLUID = Runner.getControl(pageid,'SecondLevelUserID');
SLUID.makeReadonly();
var EmpID = Runner.getControl(pageid,'EMPLID');
EmpID.makeReadonly();
var PTFStat = Runner.getControl(pageid,'PTFStatus');
PTFStat.makeReadonly();
var CreatedBy = Runner.getControl(pageid,'CreatedBy');
CreatedBy.makeReadonly();
var UpdatedByUserID = Runner.getControl(pageid,'UpdatedByUserID');
UpdatedByUserID.makeReadonly();
var LastUpdateTime = Runner.getControl(pageid,'LastUpdateTime');
LastUpdateTime.makeReadonly();
var PTFNumber = Runner.getControl(pageid, 'PTFNumber');
PTFNumber.makeReadonly();
var Processed = Runner.getControl(pageid,'Processed');
Processed.makeReadonly();
var Compliance = Runner.getControl(pageid,'Compliance');
Compliance.makeReadonly();
var RelocationCompleted = Runner.getControl(pageid,'RelocationCompleted');
RelocationCompleted.makeReadonly();
var InitiatingManagerEmailSentDate = Runner.getControl(pageid,'InitiatingManagerEmailSentDate');
InitiatingManagerEmailSentDate.makeReadonly();
var Processed = Runner.getControl(pageid,'Processed');
Processed.makeReadonly();
var SecondManagerEmailSentDate = Runner.getControl(pageid,'SecondManagerEmailSentDate');
SecondManagerEmailSentDate.makeReadonly();
var ComplianceEmailSentDate = Runner.getControl(pageid,'ComplianceEmailSentDate');
ComplianceEmailSentDate.makeReadonly();
var VPEmailSentDate = Runner.getControl(pageid,'VPEmailSentDate');
VPEmailSentDate.makeReadonly();
var VP_Name = Runner.getControl(pageid,'VP_Name');
VP_Name.makeReadonly();
var VPApproval = Runner.getControl(pageid, 'VPApproval');
VPApproval.makeReadonly();
var VPApprovalDate = Runner.getControl(pageid, 'VPApprovalDate');
VPApprovalDate.makeReadonly();
var VPEmailSentDate = Runner.getControl(pageid, 'VPEmailSentDate');
VPEmailSentDate.makeReadonly();
ChatGPT 8/27/2025

It seems you're experiencing slow response times when interacting with your ASPRunner.NET form, particularly when selecting options that trigger various behaviors in the form. Here are some potential areas to consider for optimization:

1. Reduce Complexity in Event Handlers

Each of your event handlers (on('change', function(e) {...})) has a lot of logic to execute. You might want to:

  • Combine similar logic: For example, if multiple controls trigger similar show/hide logic, consider creating a single function that handles the common behavior.
  • Debounce or throttle events: If the event triggers too frequently (like on every keystroke or rapid changes), implementing a debounce method will reduce the number of executions.

2. Optimize Condition Checks

In some cases, you're repeating checks or operations that could be simplified. For example:

  • Instead of checking for the value of the control each time, store it in a variable when the change event happens.
  • If certain operations are always executed (like clearing fields), consider moving them outside of conditional checks where they don't apply.

3. Minimize DOM Manipulations

Each call to showField, hideField, or makeReadonly affects the DOM. Try to minimize direct DOM manipulations:

  • Batch changes: Instead of calling show/hide for each field individually, you can gather all the fields that need to be shown or hidden and perform the operations in a single batch.

4. Lazy Loading or Dynamic Loading of Controls

If your form has many controls, consider loading some of them only when necessary. For instance, if certain fields are only needed based on specific selections, they can be loaded dynamically rather than being present in the DOM at the start.

5. Profile Your Code

Use browser developer tools to profile your JavaScript execution. This will help you identify which functions are taking the most time to execute and allow you to focus your optimization efforts there.

6. Optimize Validation Logic

If validations are causing delays, consider:

  • Reducing the number of validations: Only add validations when necessary.
  • Using a single validation function: Instead of attaching multiple validations to each control, consider using a single function that validates multiple fields.

7. Review Network Performance

If your form is making AJAX calls or loading data from an API, ensure that those requests are optimized:

  • Cache results: If certain data doesn't change often, cache it on the client-side to reduce the number of requests.
  • Minimize data transfer: Ensure you're only sending and receiving the data that's necessary.

8. Check for Blocking Operations

Ensure that no synchronous operations are blocking the main thread, which can lead to perceived slow response times. Use asynchronous functions where necessary.

Example of Optimized Event Handler

Here's a simplified example of how you might optimize one of your event handlers:

PlaceOnPaidAdminLeave.on('change', function(e) {
 const isChecked = this.getValue() === 'on';

 PlaceOnUnpaidLeave.clear();
 RelocationPerDiem.clear();

 const fieldsToHide = [
 "VPName", "VPEmail", "VPUserID", 
 "VPTitle", "VPApprovalDate", "VPApproval"
 ];

 if (isChecked) {
 fieldsToHide.forEach(field => pageObj.hideField(field));

 // Clear values if required
 fieldsToHide.forEach(field => {
 Runner.getControl(pageid, field).setValue('');
 });
 }
});
Conclusion
By following these suggestions, you should be able to significantly reduce the response times of your form. Always test optimizations incrementally to ensure they have the desired effect without introducing new issues.
Sergey Kornilov admin 8/27/2025

This is something that we will improve in version 11.2 of the software.