Make "<g:dialog_buttons_ok_cancel>" button to be clickable only once.

[Community Alums]

Hi All,

I want to make "g:dialog_buttons_ok_cancel> to be clicked only once by the user as I want the script run only once per session.

Below is my code for reference.

HTML CODE:

<g:dialog_buttons_ok_cancel ok_text="${gs.getMessage('Submit')}" ok_title="${gs.getMessage('Submit')}" ok="return onSubmit();" ok_style_class="btn btn-primary" 
cancel_text="${gs.getMessage('Cancel')}" cancel_title="${gs.getMessage('Cancel')}" cancel="return onCancel(); disable"/>

CLIENT SCRIPT:

function onSubmit() {
    return this._isFormValid();
    }

function _isFormValid() {
  
    var short_desc=$j("#short_description");
    var desc=$j("#description");
    if (short_desc.val().trim().length <1||desc.val().trim().length < 1) {
    
                showErrorMessage('Please fill all the fields');
        
        return false;
    }
    else{
        
   document.getElementById("ok_button").disabled = true; (using this makes the button completely non functional, the                                                                                                                                script doesn't execute at all.)
 
    return true;
}

}

Thanks,

Anu

[Ankur Bawiskar]

Hi,

then is the dialog window not closing when you click OK?

Ideally it should close once the g:ui_form is submitted

can you share your complete script?

Regards
Ankur

[Community Alums]

Hi Ankur,

The window closes but it takes a little time to process the request, so the user tends to click the submit button multiple times and hence the associated script(created to create new records) executes multiple times & this is an issue.

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">
<style>    
        .modal-footer {
            margin-top: 10px;
        }
        
        .list-padding {
            padding-left:50px;
            margin-top:30px;
            margin-bottom:30px;
        }
    </style>
    

    <g:ui_form>
        
    <input type="hidden" id="vdtID" name="vdtID" value="${JS:sysparm_vdt}"/>
    
    <g:evaluate var="jvar_shortDescription" expression="RP.getWindowProperties().short_vdt" />
        <g:evaluate var="jvar_Description" expression="RP.getWindowProperties().description" />
   
    <br></br>        
 Short Description: <input type="text" name="short_description" id="short_description" value="${jvar_shortDescription}" size="88" minlength="1" maxlength="160" class="form-outline form-control" required="required"/>
        <br></br>
        
         
        Description: <br></br> 
         <g:textarea id="description" name="description" label="" cols="90" rows="15" minlength="1" maxlength="4000" class="form-outline form-control" required="required" >${jvar_Description}</g:textarea>
        <br></br>
 
        <footer class="modal-footer">
    <g:dialog_buttons_ok_cancel ok_text="${gs.getMessage('Submit')}" ok_title="${gs.getMessage('Submit')}" ok="return onSubmit();" ok_style_class="btn btn-primary" 
                cancel_text="${gs.getMessage('Cancel')}" cancel_title="${gs.getMessage('Cancel')}" cancel="return onCancel(); disable"/>
        </footer>
    </g:ui_form>
    
    
</j:jelly>

Client Script:

function onCancel() {
    GlideDialogWindow.get().destroy();
    return false;
}
function onSubmit() {
    return this._isFormValid();
    }

function _isFormValid() {
       var short_desc=$j("#short_description");
    var desc=$j("#description");
    if (short_desc.val().trim().length <1||desc.val().trim().length < 1) {
    
                showErrorMessage('Please fill all the fields');
        
        return false;
    }
    else{ 
    document.getElementById("ok_button").disabled = true; //using this stops the processing script       
    
    return true;
}

}

function showErrorMessage(messageText) {
    if (messageText) {
        var errorMsg = '<div class="outputmsg outputmsg_error notification notification-error"><img class="outputmsg_image" src="images/outputmsg_error_24.gifx"/>' + messageText + '</span></div>';
        $j('#bulk_error_messages > .outputmsg_div').append(errorMsg);
        $j('#bulk_error_messages').show();
    }
}

function removeErrorMessage(e){
    if (e){
        e.preventDefault();
        e.stopPropagation();        
    }
    $j('#bulk_error_messages').hide();
    $j('#bulk_error_messages > .outputmsg_div').html('');
    
} 

Thanks for the help!

[Ankur Bawiskar · Accepted solution]

Hi,

what you can do is this?

1) once user clicks the button disable it

HTML:

    <g:dialog_buttons_ok_cancel id="ok_button" ok_text="${gs.getMessage('Submit')}" ok_title="${gs.getMessage('Submit')}" ok="return onSubmit();" ok_style_class="btn btn-primary" 

try this in client script

function onCancel() {
    GlideDialogWindow.get().destroy();
    return false;
}
function onSubmit() {
    return this._isFormValid();
    }

function _isFormValid() {
       var short_desc=$j("#short_description");
    var desc=$j("#description");
    if (short_desc.val().trim().length <1||desc.val().trim().length < 1) {
    
                showErrorMessage('Please fill all the fields');
        
        return false;
    }
    else{ 
   var ok = document.getElementById("ok_button");
ok.style.display = "none";       
    
    return true;
}

}

function showErrorMessage(messageText) {
    if (messageText) {
        var errorMsg = '<div class="outputmsg outputmsg_error notification notification-error"><img class="outputmsg_image" src="images/outputmsg_error_24.gifx"/>' + messageText + '</span></div>';
        $j('#bulk_error_messages > .outputmsg_div').append(errorMsg);
        $j('#bulk_error_messages').show();
    }
}

function removeErrorMessage(e){
    if (e){
        e.preventDefault();
        e.stopPropagation();        
    }
    $j('#bulk_error_messages').hide();
    $j('#bulk_error_messages > .outputmsg_div').html('');
    
} 

Regards
Ankur

[Community Alums]

Hi Ankur,

Thanks, it was super helpful.

Best Regards,

Anubha Datey