JSFiddle - React, Tailwind, and code Playground

by NicoO

HTML

<div id="DescriptionDialog" title="Update Settings" style="display: none;">
    <p>Please enter the reason for this update:</p>
    <input id="StateDescription" name="StateDescription" class="longer" type="text" placeholder="enter description of change" />
</div>

JavaScript

function DialogFunction() {

    $('#DescriptionDialog').show();

    $('#DescriptionDialog').dialog({
        open: function () {
            $('.ui-dialog :button').blur();
        },
        width: 500,
        modal: true,
        resizable: false,
        buttons: {
            "OK": function () {
                alert('OK');

                var description = $('#StateDescription').val();

                alert(description);

                //This is where i will make an ajax call to use the description entered.

                $('#StateDescription').val("");
                $('#DescriptionDialog').hide();
                $(this).dialog('close');

            },
                "Cancel": function () { // get rid of the dialog and reset the form
                $(this).dialog('close');
                $('#StateDescription').val("");
                $('#DescriptionDialog').hide();
            }
        }
    });
    
    
}

DialogFunction();