AJAX Deprecation-Proof my JS

[abitaquest]

Hi, all —

The upcoming deprecation of the "Disable AJAX loading" button affects some of my forms.  With AJAX loading, the following script (to require that forms be submitted three weeks in advance) will do nothing. It works without AJAX running, though. Here's what they all use:
 

<SCRIPT LANGUAGE="JavaScript">

function check_date()
{
var entered_value = document.getElementById("InsertRecorddateNeeded").value;
var entered_date = new Date(entered_value);

var three_week_date = new Date();
three_week_date.setDate(three_week_date.getDate() + 20);

if(entered_date < three_week_date)
   {
      alert("Must be at least 3 weeks in future");
      return false;
 }
}

document.getElementById("caspioform").onsubmit=check_date;
</SCRIPT>

I believe the .onsubmit portion at the very end is the issue. Anyone know how to modify this so it will still work while AJAX is running? Thanks much!

BTW, I know 20 days isn't 3 weeks. My users can't seem to wrap their head around that, though. ;-)

[Volomeister]

Hi @abitaquest

You can try this version:
 

<SCRIPT>

function check_date(e)

{
var entered_value = document.getElementById("InsertRecorddateNeeded").value;
var entered_date = new Date(entered_value);

var three_week_date = new Date();
three_week_date.setDate(three_week_date.getDate() + 20);

if(entered_date < three_week_date)
   {
      e.preventDefault()
      alert("Must be at least 3 weeks in future");
      return false;
 }
}

document.addEventListener('BeforeFormSubmit', check_date)
</SCRIPT>

Let me know if it worked

[abitaquest]

Thanks very much for that.

With AJAX loading allowed, it does show the error message briefly ("Must be at least 3 weeks," etc.), but then it goes right ahead and submits the form anyway.

With AJAX loading disabled, it submits, and no error message appears.

Got an idea for stopping the submit from happening when an error appears?

[abitaquest]

For anyone else affected by this particular change, here is the working script and notes, courtesy of the Caspio folks.
 

Quote

For the script to check the value of 'InsertRecorddateNeeded' before submission, you can use this code instead:
 

<script>

document.addEventListener('BeforeFormSubmit', function check_date(e) {

var entered_value = document.getElementById("InsertRecorddateNeeded").value;
var entered_date = new Date(entered_value);

var three_week_date = new Date();
three_week_date.setDate(three_week_date.getDate() + 20);

if(entered_date < three_week_date)
{
e.preventDefault()
alert("Must be at least 3 weeks in future");
return false;
}

});

</script>

It would be better to call the event first so that when the DataPage loads, it will run the first syntax. For more information on this event, you can check this article: https://howto.caspio.com/datapages/ajax-loading/#:~:text=%7D)%3B%0A%3C/script%3E-,Example%203,-%3A%20A%20JavaScript

Make sure to disable the HTML Editor in the Advanced tab before pasting the code to avoid additional spaces or characters: https://howto.caspio.com/datapages/datapage-components/disabling-html-editor-in-datapage-header-footer-and-html-blocks/