Jump to content

Form change due to validation prevents javascript function

Recommended Posts

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:

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





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

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";


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


Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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) {


                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";



Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...