JS Change Event Firing on Failed Form Submission

[SDSteve]

I have two blocks of JavaScript placed in the bottom most HTML section of a Submission Form. These are required to reprocess rules on this page if a user makes any changes to either the Parent, WC_MFG, or Secondary,WC_MOD_OPT, fields of the Cascading Elements on this form. All is well and performs as needed and expected.

The issue arises when a change event is firing during a failed form submission and I don't believe it should. During a successful form submission all works perfectly. The failed submission we have observed, is when a required field is forgotten and the Submit button is clicked. The secondary field, WC_MOD_OPT, on the cascading element seems to have a change event as the second section of my JavaScript executes and resets the fields when it should not, there have been no user updates to any of the data.

I have debugged this using the console as noted in the script. I also have created a Calculated Value using Case When and it results in the same scenario.

Current JavaScript located in the final HTML Block on the Form just before the Footer:

<script>
 document.getElementsByName("InsertRecordWC_MFG")[0].addEventListener("change", function() {
 console.log("I changed the manufacturer!");  
 document.getElementsByName("InsertRecordDRBI_YN")[0].value = "No";
 document.getElementsByName("InsertRecordFR_YN")[0].value = "No";
 document.getElementsByName("InsertRecordPERMIT_SUBMIT")[0].value = "";
 });

 document.getElementsByName("InsertRecordWC_MOD_OPT")[0].addEventListener("change", function() {
   console.log("I changed the model!");
   document.getElementsByName("InsertRecordDRBI_YN")[0].value = "No";
   document.getElementsByName("InsertRecordFR_YN")[0].value = "No";
   document.getElementsByName("InsertRecordPERMIT_SUBMIT")[0].value = "";
 });
</script>

I would like to know if there is an event I could capture while the form submission fails due to required fields? I could then attempt to catch this and handle this exception but have no idea what it might be or if it even exists.

[Hastur]

Hello @SDSteve

You need to assign your custom events on DataPageReady custom event.
First of all, make sure that your DataPage uses the AJAX loading. The AJAX checkbox should be unchecked.

Then try using this code:

<script type="text/javascript">
document.addEventListener('DataPageReady', customEvent);
  
function customEvent() {
 document.getElementsByName("InsertRecordWC_MFG")[0].addEventListener("change", function() {
   console.log("I changed the manufacturer!");  
   document.getElementsByName("InsertRecordDRBI_YN")[0].value = "No";
   document.getElementsByName("InsertRecordFR_YN")[0].value = "No";
   document.getElementsByName("InsertRecordPERMIT_SUBMIT")[0].value = "";
 });

 document.getElementsByName("InsertRecordWC_MOD_OPT")[0].addEventListener("change", function() {
   console.log("I changed the model!");
   document.getElementsByName("InsertRecordDRBI_YN")[0].value = "No";
   document.getElementsByName("InsertRecordFR_YN")[0].value = "No";
   document.getElementsByName("InsertRecordPERMIT_SUBMIT")[0].value = "";
 });
}
</script>

 

[SDSteve]

Hastur,

Thank you this code yields the same results. This is my first post and unsure if I chose the correct topic.

While I am not a JS or HTML guru, there is a change to the field that the code is listening for, this change event fires when the submission fails and the code executes. Not sure moving the listening to a different area will prevent this. I am open to any suggestions, but thinking this is a potential design issue, meaning not sure what is being updated maybe the formatting but surely not the data in the field. This field is the secondary field of a cascading element not sure if this has anything to do with it or not.

The very last console line is displaying the firing of an update to my model field WC_MOD_OPT when the form submission fails. The others are simply page usage and navigation. I do notice the debugging number in the display has changed with the code you provided. I am wondering if it is possible to capture that number hand have the code not execute? Of course that might cause other unforeseen issues.

The code fires clearing the "Is Dynamic Rocker Back Interface Required?" to No it was selected to Yes. This occurs on the "Is Dynamic Footrest Required?" field as well. Just trimming testing time until I have something working for one then will test the other. The reason I am attempting to prevent this code from executing is the users will need to go back and select the products the have already selected. This could cause confusion if the user doesn't realize the items they choose yes to have been modified to No and then submit the RFQ.

Regards,

Steve

[geoffdude]

You may need to create a copy of the form, then remove all the JS associated with that form and start testing by introducing portions of the script back into the test-form. You can also create a 3rd form copy to just focus on the fields that use the scripts, and run tests on these new forms to see when the error occurs. - It's a pain, but part of the developer process at times. Hunt and peck so to speak... without messing up your OG form.

[SDSteve]

Geoffdude,

Thanks but believe the hunt and peck has already been accomplished.

I know exactly when the "error" is occurring and it is due to the firing of an update on a field that doesn't require updating. The code works perfectly when all the required fields are populated prior to submission, as noted in my original post. I believe the cause is originating as a result of the affected field being the secondary field in a cascading element and for some reason is being updated during a failed form submission. Please read the post completely if you are going to submit a suggestion. I have executed all of what you mention.

Regards, Steve

[SDSteve]

Hastur,

I neglected to include that the AJAX checkbox is not checked.

Regards, Steve

[SDSteve]

I'm guessing if we could capture the form submission failure and manage the execution of my code that could be a possible solution. I don't have the knowledge of Caspio to understand how to implement that and if it is even possible.