Confirm/Cancel alert using Sweetalerts 2 doesn't stop form submission. How can I stop submission until button is pressed?

[Marcel H_]

I'm sure that I'm overlooking something obvious, and hoping that others have worked with Sweetalerts and gotten a confirm pop up working as expected.

I'm using an onSubmit catalog client script to check for a $0.00 amount in a variable, and if so stop form submission until the user clicks the confirm button so that they are warned if the value isn't what it's supposed to be.

Right now I have this working with a normal confirm alert:

function onSubmit() {
    var fieldName = 'u_new_request_amount';
    var fieldLabel = g_form.getLabelOf(fieldName);
    var nra = g_form.getValue(fieldName);
    var ec = g_form.getValue('u_existing_contract');

    //Check if this is an existing contract, if not proceed with submit
    if (ec == "No") {
        return;
    }
    //Check if this is an existing contract and for $0.00 before submitting
    if (ec == "Yes" && nra == 0 || nra == 0.00 || nra == "$0" || nra == "$0.00" || nra == "$-0" || nra == "$-0.00" || nra == "-$0" || nra == "-$0.00") {
		var answer = confirm("Check Amount" + '\n\n' + fieldLabel + " is currently $0.00" + '\n\n' + "Please confirm you want to submit a $0.00 amount.");
		if (answer == false) {
			return false;
		}
	}
}

Now, with Sweetalerts 2, following the various examples I can find, they show formatting like so:

function onSubmit() {
    var fieldName = 'u_new_request_amount';
    var fieldLabel = g_form.getLabelOf(fieldName);
    var nra = g_form.getValue(fieldName);
    var ec = g_form.getValue('u_existing_contract');

    //Check if this is an existing contract
    if (ec == "No") {
        return;
    }
    //Check for $0.00 before submitting
    if (ec == "Yes" && nra == 0 || nra == 0.00 || nra == "$0" || nra == "$0.00" || nra == "$-0" || nra == "$-0.00" || nra == "-$0" || nra == "-$0.00") {
        Swal.fire({
            title: 'Confirm Amount',
            text: '<b>' + fieldLabel + '</b> is $0.00. If this is correct click Submit, otherwise click Cancel and change the amount.',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonText: 'Submit'
		}).then((result) => {
            if (result.value) {
                return true;
            } 
	else {
                return false;
            }
        });
    }
}

ServiceNow doesn't seem to like the arrow function, and I've tried a few different variations using things like

.then(function(result){
if (result.value == true){
return true;

but it submits anyway. Right now I'm just not sure what the confirm button is supposed to return and how to evaluate that properly, so I'm hoping someone had this figured out and can provide some suggestions or code. Thanks!

[Willem]

The ".then" is only triggered after the element is resolved and returns the value as a promise. So cannot be used to keep it open.

Callback triggers as soon as the element is triggered, so won't help either.

What I read in the document, the swal returns value true if the user clicks confirm:

"If the user clicks the confirm button, the promise resolves to true. If the alert is dismissed (by clicking outside of it), the promise resolves to null."

Can you try:

.then(function(result){
    if(result){
        return result
    }
    return false
}

The else is not needed, because if it gets in the "if" the return will stop the rest.

[Marcel H_]

Thanks for the reply Willem. 

The result is the same when formatting the ".then" section that way, form submission continues to process in the browser regardless whether the swal window is open and the user hasn't clicked any buttons.

I did some more digging on the web and found some other suggestions to make it behave more like the standard confirm() function, but that doesn't work either because async functions don't appear to be supported (I think because SN uses ES5). https://stackoverflow.com/questions/51163281/how-to-have-sweetalert-return-true-false-for-confirm-wi...

[Willem]

Hi Marcel,

By accident I found something that might work for us. I have adjusted the solution to your code, please find below.

He sets g_form._hasConfirmed to true at the selection of the button and at the end always returns false. When the user(or the script) submits, it first checks g_form._hasConfirmed and only then returns true.

function onSubmit() {
    if (g_form._hasConfirmed == true) {
        // this means they have already confirmed via the spModal
        // so no need to check again
        return true;
    }
    if (typeof spModal != 'undefined') {
        var fieldName = 'u_new_request_amount';
        var fieldLabel = g_form.getLabelOf(fieldName);
        var nra = g_form.getValue(fieldName);
        var ec = g_form.getValue('u_existing_contract');

        //Check if this is an existing contract
        if (ec == "No") {
            return;
        }
        //Check for $0.00 before submitting
        if (ec == "Yes" && nra == 0 || nra == 0.00 || nra == "$0" || nra == "$0.00" || nra == "$-0" || nra == "$-0.00" || nra == "-$0" || nra == "-$0.00") {
            Swal.fire({
                title: 'Confirm Amount',
                text: '<b>' + fieldLabel + '</b> is $0.00. If this is correct click Submit, otherwise click Cancel and change the amount.',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Submit'
            }).then(function (result) {
                if (result) {
                    g_form._hasConfirmed = true;
                    g_form.submit();
                }
            });
            return false;
        }
    }
}

I think this is a brilliant workaround! @Jon Barnes

[Willem]

@Marcel H. Did it solve your problem? If so, can you mark it as Correct? That way others can find it as well.