JSFiddle - React, Tailwind, and code Playground

by Akram kamal

HTML

<label for="test">Dimensions:</label>
<input name="test" id="test">
<div id="dialog-form" title="Give me dimensions">
    <form>
        <p>
            <label for="height">Height</label>
            <input id="height" name="height">
        </p>
        <p>
            <label for="width">Width</label>
            <input id="width" name="width">
        </p>
        <p>
            <label for="depth">Depth</label>
            <input id="depth" name="depth">
        </p>
    </form>
</div>

JavaScript

$('#dialog-form').dialog({
    autoOpen: false,
    height: 'auto',
    width: 'auto',
    modal: false,
    resizable: false,
    buttons: {
        'OK': function () {
            // declare empty string for form content
            var content = '',
                inputs = $(this).find('input'),
                len = inputs.length;   
            
            // get data from dialog inputs
            inputs.each(function (index, element) {
                content += $(this).val();
                
                if (index != len - 1)  { 
                    content += 'x';
                }
            });
            
            // pass data to opener object (input that was clicked)
            $.data(this, 'opener').val(content);
            
            // finally close dialog
            $(this).dialog("close");
        }
    }
});

// on input click show dialog
$('input#test').click(function (e) {
    var $this = $(this);
    
    // pass input object to dialog
    $('#dialog-form').data('opener', $this).dialog('open');
});