how to abort action on submit using client script

[max_danielewicz]

Hi community,

i hope everyone is ok.

SITUATION

i created a catalogue client script that runs on change, and works. However, it should be running "on submit" instead, but i don't know how to make it work.

the client script calls a script include which returns a value and depending on the value i would display a message and abort the action or proceed.

PROBLEM

i cannot make it work !!

Here is the code (attached) used in the "on change" that i need to transform for the "on submit". could you pls help me to change it so it works on submit?

function onChange(control, oldValue, newValue, isLoading) {
if (isLoading || newValue == '') {
return;
}

var sdt = g_form.getValue("start_dt"); //Choose the field to add time from
var gt = g_form.getValue("guest_type");
var stayhs = g_form.getValue("hdays"); //The amount of time to add addtime
var addtype = 'hour'; //The time type. Can be second, minute, hour, day, week, month, year.

var ajax = new GlideAjax('ABCDateUtils');
ajax.addParam('sysparm_name','CarParkSpace');
ajax.addParam('sysparm_fdt', sdt);
ajax.addParam('sysparm_gtype', gt);
ajax.addParam('sysparm_addtype', addtype);
ajax.addParam('sysparm_stayh', stayhs);
ajax.getXML(doSomething);

function doSomething(response){
var answer = response.responseXML.documentElement.getAttribute("answer");
//alert(answer);

if(answer == 'out') {
alert('Your hours selection has exceeded the amount of time you could stay for the day. Please select less hours.');
g_form.clearValue('hdays');

**should abort 
}
if(answer == null) {
alert('Unfortunately, there are not available spots for the selected date and time. Your request cannot be submitted.');
g_form.clearValue('hdays');
g_form.clearValue('start_dt');

**should abort
}
if(answer != null && answer != 'out') {
alert('Car spce ' + answer + ' will be reserved for you for the selected date and time. Please SUBMIT the form.');
}
g_form.setValue('spacename', answer);
** should submit
}
}

kind regards,

max

[Anil Lande]

Hi,

Your onSubmit client script would be like:

function onSubmit() {
   
    var sdt = g_form.getValue("start_dt"); //Choose the field to add time from
    var gt = g_form.getValue("guest_type");
    var stayhs = g_form.getValue("hdays"); //The amount of time to add addtime
    var addtype = 'hour'; //The time type. Can be second, minute, hour, day, week, month, year.

    var ajax = new GlideAjax('ABCDateUtils');
    ajax.addParam('sysparm_name', 'CarParkSpace');
    ajax.addParam('sysparm_fdt', sdt);
    ajax.addParam('sysparm_gtype', gt);
    ajax.addParam('sysparm_addtype', addtype);
    ajax.addParam('sysparm_stayh', stayhs);
    ajax.getXML(doSomething);

    function doSomething(response) {
        var answer = response.responseXML.documentElement.getAttribute("answer");
        //alert(answer);

        if (answer == 'out') {
            alert('Your hours selection has exceeded the amount of time you could stay for the day. Please select less hours.');
            g_form.clearValue('hdays');

            return false; //should abort 
        }
        if (answer == null) {
            alert('Unfortunately, there are not available spots for the selected date and time. Your request cannot be submitted.');
            g_form.clearValue('hdays');
            g_form.clearValue('start_dt');

            return false; //should abort
        }
        if (answer != null && answer != 'out') {
            alert('Car spce ' + answer + ' will be reserved for you for the selected date and time. Please SUBMIT the form.');
        }
        g_form.setValue('spacename', answer);
        // do nothing
    }
}

Thanks,

Anil Lande

[Ankur Bawiskar]

@max.danielewicz 

you cannot stop form submission using onChange Client Script.

What you can do is this

1) Make the field/variable on which the validation is running as empty and make it mandatory

2) This would ensure user is allowed to submit only when the value is valid when the next time the onChange works

function onChange(control, oldValue, newValue, isLoading) {
    if (isLoading || newValue == '') {
        return;
    }

    var sdt = g_form.getValue("start_dt"); //Choose the field to add time from
    var gt = g_form.getValue("guest_type");
    var stayhs = g_form.getValue("hdays"); //The amount of time to add addtime
    var addtype = 'hour'; //The time type. Can be second, minute, hour, day, week, month, year.

    var ajax = new GlideAjax('ABCDateUtils');
    ajax.addParam('sysparm_name','CarParkSpace');
    ajax.addParam('sysparm_fdt', sdt);
    ajax.addParam('sysparm_gtype', gt);
    ajax.addParam('sysparm_addtype', addtype);
    ajax.addParam('sysparm_stayh', stayhs);
    ajax.getXML(doSomething);

    function doSomething(response){
        var answer = response.responseXML.documentElement.getAttribute("answer");
        //alert(answer);

        if(answer == 'out') {
            alert('Your hours selection has exceeded the amount of time you could stay for the day. Please select less hours.');
            g_form.clearValue('hdays');
            g_form.setMandatory('hdays', true);
        }
        if(answer == null) {
            alert('Unfortunately, there are not available spots for the selected date and time. Your request cannot be submitted.');
            g_form.clearValue('hdays');
            g_form.clearValue('start_dt');
            g_form.setMandatory('hdays', true);
            g_form.setMandatory('start_dt', true);
        }
        if(answer != null && answer != 'out') {
            alert('Car spce ' + answer + ' will be reserved for you for the selected date and time. Please SUBMIT the form.');
        }
        g_form.setValue('spacename', answer);
        
    }
}

Regards
Ankur

[Ankur Bawiskar]

@max.danielewicz 

Did you get a chance to check on my above comment?

Regards
Ankur

[quintenvandenb1]

Hello @max.danielewicz 

I'm happy to see this issue you are facing here, as I have encountered this exact same challenge. I eventually managed to find a solution for it.

So let me first explain why return false does not work.

If you return false within an Ajax call, the thread will already be finished as an Ajax call is an Asynchronous response. Simplistically saying, this means the onSubmit method is already finished when you are returning false.

What I eventually ended up doing, I assigned my own custom property to the g_form object called scratchpad. As the actual scratchpad is not an option since it is a catalog client script, I created my own temporary object that is accessible from everywhere in the form.

So I would have let's say an onChange client script that does some Ajax Logic to calculate whether the submission would be allowed or not. In the onChangeClient script I had a code like this:

g_form.scratchpad.canSubmit = true;

in the actual onSubmit script, I would no longer have my Ajax call, but rather check again for that value if the submission is possible or not. Like this:

//if set to true, the form will submit,

if(g_form.scratchpad.canSubmit != true){
alert('You cannot submit this form yet!');
return false;
}

//fail check done, allow submission
return true;

As a sidenote, I am aware that we are writing something in an object that belongs to the ServiceNow g_form api. However the object does not exist at this point, and since we are only manipulating this on the client side, there is few to no risk into breaking anything.

This was and is until today for me the perfect solution for this specific use case.

Hope this helps you and many others further.

Please mark as Helpful or correct answer if it does help you further.

Kind regards

Quinten

[Ashley]

Good Morning,

I am trying out your solution within a Catalog Client Script and can't seem to get it to work. When the script runs within the Service Portal, I get "Unhandled exception in GlideAjax." errors when it tries to run:

g_form.scratchpad.canSubmit = true;

Do I need to have any specific settings within the client script? or declared within the function? i.e. control, oldValue, newValue.

Kind Regards

Ashley