replied on January 11, 2021
Here's a simple process to prompt the user to confirm their action before proceeding.
- Add a single line text field to your form. Make it required. Give it CSS Class: submit_confirmation
- Add this CSS to your form:
.submit_confirmation {display: none!important;}
-
Add this Javascript to your form:
$(document).ready(function () {
$('.action-btn.Reject').on('click', function() {
var userResponse = confirm('Please confirm you want to: ' + $('.Reject').val());
if(userResponse)
{
$('.submit_confirmation input').val('CONFIRMED');
}
else
{
$('.submit_confirmation input').val('');
}
});
$('.action-btn.Submit').on('click', function() {
var userResponse = confirm('Please confirm you want to: ' + $('.Submit').val());
if(userResponse)
{
$('.submit_confirmation input').val('CONFIRMED');
}
else
{
$('.submit_confirmation input').val('');
}
});
$('.action-btn.Approve').on('click', function() {
var userResponse = confirm('Please confirm you want to: ' + $('.Approve').val());
if(userResponse)
{
$('.submit_confirmation input').val('CONFIRMED');
}
else
{
$('.submit_confirmation input').val('');
}
});
});
The CSS hides the field you added to your form from view. It's important to hide it via CSS instead of via Field Rules, because you want the required status of the field to be honored, which Field Rules will cause to be ignored.
The user will be prompted if they want to Reject/Submit/Approve the form (it'll specifically prompt whatever you have set for the labels on the Reject/Submit/Approve buttons), and the submission will only be allowed to proceed if they accept the prompt.
Alternately, here's a simplier version of the Javascript, that does the same message for all three buttons, instead of prompting the specific button label:
$(document).ready(function () {
$('.action-btn').on('click', function() {
var userResponse = confirm('Please confirm you want to process this form.');
if(userResponse)
{
$('.submit_confirmation input').val('CONFIRMED');
}
else
{
$('.submit_confirmation input').val('');
}
});
});