Disable OK button on UI Page after single click

[Jeffrey Beaudry]

I have a UI Page that asks for users input from a drop-down, and then they select OK to initiate the workflow.

I am noticing that the window is staying open while processing, which allows the user to click on the OK button multiple times.  This causes the workflow to initiate multiple times as well.

Is there a way to disable the button after a single click?

Thank you.

[Ankur Bawiskar]

Hi,

if you use g:ui_form tag then the form will get submitted.

Also you can destroy the window once OK is clicked using this.

GlideDialogWindow.get().destroy();

share your complete UI page scripts HTML, Client Script, Processing script etc

[Jeffrey Beaudry]

Hello Ankur,

I am currently using the 'GlideDialogWindow.get().destroy();' script, but its not closing the window quick enough.

HTML: 

<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
<g:inline template="heisenberg_output.xml" type="css"/>
<g:evaluate> var ci_sysid = '${sysparm_ci}';
</g:evaluate>

<g:evaluate var="jvar_gr" object="true">
var choices = new GlideRecord('u_olive_list');
choices.addQuery('u_parent_business_application', ci_sysid);
choices.orderBy('sequence');
choices.query();
</g:evaluate>
<tr>
<div class="panel-heading">
<h1 class="navipane-title" style="font-size: 20px;text-align:center;padding: 10px 20px !important;"><strong>Select the Exception</strong></h1>
</div>

<td>
<select id="exc_cause" table="'u_olive_list'">

<j:while test="${choices.next()}">
<option value="${choices.u_name}"> ${choices.u_name} --- ${choices.u_exception_description}</option>
</j:while>
</select>
</td>
</tr>

<tr>
<div class="panel-footer text-right">
<td colspan="2" style="text-align:right;padding-top:10px;">
<button class="btn btn-default" onclick="closeWindow()" style="margin-right:10px;">Cancel</button>
<button class="btn btn-primary" onclick="update_ticket()">Ok</button>
</td>
</div>
</tr>
</j:jelly>

CLIENT SCRIPT: 

gel('exc_cause').value = g_form.getValue('choices');

function update_ticket() {
if (gel('exc_cause').value != "") {

var short_desc = gel('exc_cause').value;
var ritm = g_form.getValue('request_item');
var loc = g_form.getValue('location');
var cmdb_ci = g_form.getValue('cmdb_ci');
var desc = g_form.getValue('description');

var gr = new GlideRecord("sc_task");

gr.setValue('short_description', short_desc);
gr.setValue('request_item', ritm);
gr.setValue('location', loc);
gr.setValue('cmdb_ci', cmdb_ci);
gr.setValue('description', desc);
gr.setValue('assigned_to', 'a276281edb4ef09043d4d2e3ca961974');
gr.setValue('assignment_group', 'c2e093ad1be911109435feaf034bcbd0');
gr.setValue('state', '-5');
gr.insert();

g_form.setValue('comments', 'Exception has been submitted.');
g_form.setValue('state', '3');
g_form.save();

GlideDialogWindow.get().destroy();
g_form.addInfoMessage('Exception has been submitted.');

} else {
g_form.addErrorMessage('Please select an Exception or select Cancel.');
}
}

function closeWindow() {
GlideDialogWindow.get().destroy();
}

Thank you!

[Ankur Bawiskar]

@Jeffrey Beaudry 

Please use ServiceNow jelly tag for OK and Cancel button

<g:dialog_buttons_ok_cancel>

HTML:

<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
<g:inline template="heisenberg_output.xml" type="css"/>
<g:evaluate> var ci_sysid = '${sysparm_ci}';
</g:evaluate>

<g:evaluate var="jvar_gr" object="true">
var choices = new GlideRecord('u_olive_list');
choices.addQuery('u_parent_business_application', ci_sysid);
choices.orderBy('sequence');
choices.query();
</g:evaluate>
<tr>
<div class="panel-heading">
<h1 class="navipane-title" style="font-size: 20px;text-align:center;padding: 10px 20px !important;"><strong>Select the Exception</strong></h1>
</div>

<td>
<select id="exc_cause" table="'u_olive_list'">

<j:while test="${choices.next()}">
<option value="${choices.u_name}"> ${choices.u_name} --- ${choices.u_exception_description}</option>
</j:while>
</select>
</td>
</tr>

<tr>
<div class="panel-footer text-right">
<td colspan="2" style="text-align:right;padding-top:10px;">
<g:dialog_buttons_ok_cancel id="ok_button" cancel="return closeWindow();" ok="return update_ticket();"/>
</td>
</div>
</tr>
</j:jelly>

[Jeffrey Beaudry]

I updated the buttons, but unfortunately still experiencing the issue.

When a user selects the OK button, it generates a copied task as designed.  But while its doing this, the UI Page stays open/visible, allowing the user to reselect OK.  This is causing multiple copied tasks to be created depending on how many times they click OK.  So I would like a way to disable or dither out the button after the first click. 

I tried using 'document.getElementById("ok_button").disabled = true;' but that did not work either.  Thanks again for the assistance.