How to display checkbox in a dialog box

[praveeng2]

Hi Guys, I have an ask as follows. Please suggest how this can be achieved. Thanks

[GlideFather]

Hi @praveeng2 

you can create onSubmit client script applied on [cmn_location] as following:

[GlideFather]

Hi @praveeng2 

have you had chance looking at my response?

what's the current status - solved or something still needed?

[GlideFather]

Hi @praveeng2 

any progress? Please share feedback whether you are good or need something more

[Chavan AP]

Option 1: GlideDialogWindow (Popup)

Client Script (onChange/onClick):

function showConfirmDialog() {
    var dialog = new GlideDialogWindow('confirmation_dialog');
    dialog.setTitle('Track the status of the item');
    dialog.setSize(450, 250);
    dialog.render();
}

UI Page (Name: confirmation_dialog):
<div style="padding: 20px; font-family: Arial;">
    <h2>Track the status of the item</h2>
    <h3>Please confirm your selection</h3>
    
    <div style="margin: 20px 0;">
        <input type="checkbox" id="confirm_checkbox" style="transform: scale(1.5);"> 
        <span style="margin-left: 10px;">Once you confirm ensure to submit</span>
    </div>
    
    <div style="margin-top: 30px;">
        <button onclick="submitAction()" style="padding: 10px 20px; margin-right: 10px;">Submit</button>
        <button onclick="cancelAction()" style="padding: 10px 20px;">Cancel</button>
    </div>
</div>

<script>
function submitAction() {
    if (document.getElementById('confirm_checkbox').checked) {
        alert('Item status tracked successfully!');
        GlideDialogWindow.get().destroy();
    } else {
        alert('Please confirm your selection by checking the box');
    }
}

function cancelAction() {
    GlideDialogWindow.get().destroy();
}
</script>


Option 2: Simple UI Action
UI Action (Client: true):
// Condition: true
// Client: true
// onclick:

if (confirm('Track the status of the item\n\nPlease confirm your selection\nOnce you confirm ensure to submit')) {
    // Your submit logic here
    alert('Item status tracked successfully!');

} else {
    return false; // Cancel action
}

Usage:
Option 1: More control, custom styling, matches your screenshot exactly
Option 2: Quick implementation, browser native dialog, less customizable