How to add values of popup to field in the form

[Roshini]

Hi Team,
I have a requirement when the state of incident is moved from "on hold" to "In progress" i need a popup window to appear where it will ask for the "Reason for work in progress :" and once the user clicks ok button in the popup window that needs to be copied to work notes of the incident form.
Am able to  bring the popup but can someone help me in the script to get the user input values in the "reason for work in progress" to work notes
UI page

Client script

[Shubham_Jain]

@Roshini  

UI Page: 

<script type="text/javascript">
function submitForm() {
    var reason = document.getElementById('reason_input').value;
    if (!reason) {
        alert('Please enter a reason for work in progress.');
        return;
    }
    // Send the reason to the server and close the dialog
    g_form.addInfoMessage('Reason for Work In Progress: ' + reason);
    GlideDialogWindow.get().destroy();
    gsftSubmit(null, g_form.getFormElement(), 'submit_reason'); // Calls the UI Action with reason
}

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

<div>
    <h2>Reason for Work In Progress</h2>
    <label for="reason_input">Please provide a reason:</label>
    <input type="text" id="reason_input" style="width: 100%;">
    <br><br>
    <button type="button" onclick="submitForm()">OK</button>
    <button type="button" onclick="closeDialog()">Cancel</button>
</div>

Create a UI Action to Trigger the Popup**:

• Now, create a UI Action that triggers this popup when the state changes from "On Hold" to "In Progress."
• Navigate to System Definition > UI Actions and create a new one.

UI Action Settings:

• Table: incident
• Action name: submit_reason
• Condition: Ensure this runs only when the state changes from On Hold to In Progress.

Example UI Action Script:

if (current.state == 2 && previous.state == 3) {  // 2 = In Progress, 3 = On Hold
    var dialog = new GlideDialogWindow('reason_for_in_progress_popup');
    dialog.setTitle('Provide Reason for Work In Progress');
    dialog.render();
}

// Code to capture the reason from the UI page input
if (action.name == 'submit_reason') {
    var reason = g_request.getParameter('reason_input');
    if (reason) {
        current.work_notes = 'Reason for moving to In Progress: ' + reason;
    }
}

In the first part, you check if the state is being moved from On Hold (state value 3) to In Progress (state value 2) and trigger the UI Page popup.

In the second part, you capture the value submitted from the popup (using g_request.getParameter()) and update the Work Notes with the user's input.

[Roshini]

Can i know how to achieve this in client script?
Because we are not using extra UI action, within the select box of state we are changing it from onhold to in progress.

In client script am getting below error for the code you provided in UI action.
onChange script error: ReferenceError: action is not defined function () { [native code] }

[Roshini]

Even in UI action am not able to get the dialog window when i click on the ui action. Below is the code that i tried (as per your suggestion) 

UI Page

<?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:ui_form>

   <script type="text/javascript">

function submitForm() {

    var reason = document.getElementById('reason_input').value;

    if (!reason) {

        alert('Please enter a reason for work in progress.');

        return;

    }

    // Send the reason to the server and close the dialog

    g_form.addInfoMessage('Reason for Work In Progress: ' + reason);

    GlideDialogWindow.get().destroy();

    gsftSubmit(null, g_form.getFormElement(), 'submit_reason'); // Calls the UI Action with reason

}

function closeDialog() {

    GlideDialogWindow.get().destroy();

}

</script>

<div>

    <label for="reason_input">Please provide a reason:</label>

    <input type="text" id="reason_input" style="width: 100%;">

    <button type="button" onclick="submitForm()">OK</button>

    <button type="button" onclick="closeDialog()">Cancel</button>

    </input>

</div>

  </g:ui_form>

</j:jelly>

UI action 

function onhold(){

if (current.state == 2 && previous.state == 3) {  // 2 = In Progress, 3 = On Hold

    var dialog = new GlideDialogWindow('reason_for_in_progress_popup');

    dialog.setTitle('Provide Reason for Work In Progress');

    dialog.render();

}

// Code to capture the reason from the UI page input

if (action.name == 'submit_reason') {

    var reason = g_request.getParameter('reason_input');

    if (reason) {

        current.work_notes = 'Reason for moving to In Progress: ' + reason;

    }

}

gsftSubmit(null, g_form.getFormElement(), 'reopen_incident');

}