Prevent form from submitting until Modal is closed in onSubmit client script

[Mark Endsley]

In the service portal we would like to start using Modals instead of alerts. One issue I'm having is when I write a script like this:

function onSubmit() {
   
	   if (typeof spModal != 'undefined') {


       spModal.open({


           message: 'Hello',


           title: ''


       });


   } else {


       var gm = new GlideModal();


       gm.setTitle('');


       gm.renderWithContent('Hello');


   }



   
}

In the service portal after pushing submit, the form will submit after a few seconds without the user having pushed ok or closing the modal.

Is there any way to get it to perform more like an alert, requiring the modal to be closed before it submits and moves on to the next page?

[Salah2]

Hi @Mark Endsley  does this solution works for Catalog item record producer? 

[Mark Endsley]

This should work for both Catalog Items and Record Producers

[Salah2]

Hi @Mark Endsley 

Thank you for your kind reply.  It works, as you said; however, I have some questions. 

1- I am getting this 'confirmed' is declared but its value is never read. error message.  Is that right?

}).then(function(confirmed) {

            g_scratchpad.hasAcknowledge = true;
            var actionName = g_form.getActionName();
            g_form.submit(actionName);
            return true;

2- would it cause an issue to change 

gm.renderWithContent('HELLO"); to 

gm.renderWithContent();

function onSubmit() {
    //Type appropriate comment here, and begin script below

    if (typeof spModal != 'undefined') {

        if (g_scratchpad.hasAcknowledge) {
            return true;

        }
        spModal.open({
            title: 'ACKNOWLEDGEMENT',
            message: 'By submitting this request,',
            buttons: [{
                    label: 'Cancel',
                    cancel: true
                },
                {
                    label: 'Confirm',
                    primary: true
                }
            ]

        }).then(function(confirmed) {

            g_scratchpad.hasAcknowledge = true;
            var actionName = g_form.getActionName();
            g_form.submit(actionName);
            return true;

        });

        g_scratchpad.hasAcknowledge = false;
        return false;

    } else {

        var gm = new GlideModal();
        gm.setTitle('');
        gm.renderWithContent();

    }
}

[Mark Endsley]

That is just a warning message because in your function you never use confirmed to do anything. Normally you would want to do if(confirmed) around this block in the .then

But the message you are getting shouldn't stop your code from running, it will just mean it doesn't actually care whether or not the user confirmed or not, it will always carry out the functionality in that block.

            g_scratchpad.hasAcknowledge = true;
            var actionName = g_form.getActionName();
            g_form.submit(actionName);
            return true;

[Salah2]

Hello @Mark Endsley 

Please accept in advance if I am bothering you. I am new to scripting and Sp.

I used your code and changed it to something I understood better. Unfortunately, I am getting an error message

function onSubmit() {
    //Type appropriate comment here, and begin script below

    if (typeof spModal !== "undefined" && !g_form._hasConfirmed) {

        spModal.open({
            title: "Acknowledgment:",
            message: "",
            buttons: [{
                    label: "Cancel",
                    cancel: true
                },
                {
                    label: "Confirm",
                    primary: true
                }
            ]
        }).then(function(confirm) {
            if (confirm) {
                g_form._hasConfirmed = true;
                var actionName = g_form.getActionName();
                g_form.submit(actionName);
                return true;
            }
        });

        return false;
    }
}