jQuery UI dialog with form fields passing data into single input

I’ve recently ran into this scenario: there is a single input field with dimensions in a height x width x depth format. What we can do to force/guide user to use propper format?Idea is very user friendly. Simply show dialog with three fields and then translate its inputs into one string. Check script below (it requires jQuery UI):

$('#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');
});

Only tricky part is usage of jQuery data function. In this case we need to store clicked element (for further update of its value).

Check full working example at jsfiddle:
http://jsfiddle.net/fedek6/3w5ed/5/



Posted

in

Tags:


Comments

0 responses to “jQuery UI dialog with form fields passing data into single input”

  1. […] jQuery UI dialog with form fields passing data into single input …Apr 3, 2014 – banner-jquery. jQuery UI dialog with form fields passing data into single input … declare empty string for form content var content = ”, inputs … […]