Form change due to validation prevents javascript function

[geoffdude]

Hi all,

I have a form that has a javascript call on a checkbox (to change iFrame height).. it works fine, except when the submit button click runs validation. Once the form has validated, and changed, showing required prompts my javascript functions don't work anymore.

Anyone else encounter this? And, more importantly is there a solution?

Here's my form:
https://c0esh141.caspio.com/dp/f98820004b7009976c044d7e808a

Click any check box and an alert will pop up .. except if form has been validated on submit and required prompts are visible.

 

NORMAL STATE OF FORM - with checkbox checked

 

VALIDATED STATE OF FORM

Here's my script on the checkbox (which won't run when form is in validation state):

<script>
const checkbox = document.getElementsByName("InsertRecordbilling_different")[0];

checkbox.addEventListener('change', (event) => {
  if (event.target.checked) {
    /*alert('checked yes');*/
parent.document.getElementById('iFrameCaspio').style.height = "860px";
  } else {
    /*alert('not checked');*/
parent.document.getElementById('iFrameCaspio').style.height = "630px";
  }
})
</script>

Thx,

* Yes - I know "functions" is spelled wrong in images.

Geoff

[Kurumi]

Are you familiar with the Caspio's article regarding its 13.0 impacted Areas? Here: https://howto.caspio.com/release-notes/caspio-bridge-13-0/13-0-impacted-areas/

I think your script might need a little modification due to the incompatibility with the new feature of AJAX. Or you can try to check the 'Disable AJAX Loading' on your DataPage.

 

And test if it will work now. I hope this helps!

[geoffdude]

Thanks very much .. that was the issue.

I've used the modified script for many of my pages but just forgot completely on this form to use it. Also, the "Disable AJAX loading" function once checked worked as well. (I have it enabled now though since I've updated the script).

 

For those that may want to see the updated script that works, here you go.

<script type="text/javascript">

document.addEventListener('DataPageReady', function (event) {

            $('input[id="InsertRecordbilling_different"]').click(function(){

                if($(this).prop("checked") == true){
                     /*alert("Checkbox is checked.");*/
                    parent.document.getElementById('iFrameCaspio').style.height = "860px"; 
                }

                else if($(this).prop("checked") == false){
                     /*alert("Checkbox is unchecked.");*/
                    parent.document.getElementById('iFrameCaspio').style.height = "630px";
                }

            });
        });
 
</script>