Confirm form submission if a certain condition is met

[Alexray]

Hello Caspio Family,

I wish to share a JS code snippet with you, in case if you wish your users to confirm form submission if a certain condition is met. For example, if some field is empty.

Let's say we have a text field for email which is not required. When that field is empty, we wish to ask our visitors if they are sure they want to submit the for without the email.

document.addEventListener("BeforeFormSubmit", function (event) {
  if (document.getElementById("InsertRecordEmail").value == "") {
    event.preventDefault();
    if (confirm("Are you sure you want to submit the form without your email?")) {
      document.forms["caspioform"].submit();
    }
  }
});

Let me know who thinks it is useful.

[ronbrumbarger]

I have a form and have added an event listener exactly as above and as described in the Caspio help. I have the same form as outlined by Alexray above, but I cannot get the form to not submit. I even have the exact code as above. Help me out? How do I get the form to *not* submit? What am I missing?

[Alexray]

Hi Ron, 

Is the form submitted even you click cancel?  If yes, then I will need to check your DataPage. Please provide the deployed URL and test credentials if you have authentication.

Regards,
Alex

[ronbrumbarger]

10 hours ago, Alexray said:

Hi Ron, 

Is the form submitted even you click cancel?  If yes, then I will need to check your DataPage. Please provide the deployed URL and test credentials if you have authentication.

Regards,

Alex

Private message with credentials sent.

[chumkirebzi]

Hi everyone!

Thank you for the code, @Alexray! This is exactly what I was looking for in my form.

I also tried it on an update form and it also works by using EditRecord instead of InsertRecord which I got from the JS Guide: 

 

 

<script>
document.addEventListener("BeforeFormSubmit", function (event) {
  if (document.getElementById("EditRecordText255").value == "") {
    event.preventDefault();
    if (confirm("Are you sure you want to submit the form without the text255?")) {
      document.forms["caspioform"].submit();
    }
  }
});
</script>

Good luck!