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):

    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
// 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:

Published by

Konrad Fedorczyk

I'm interested in programming and gamedev. I especially luv HTML5 and everything connected to web technologies.

One thought on “jQuery UI dialog with form fields passing data into single input”

Leave a Reply

Your email address will not be published.