How to return user input from jQuery UI dialog box

Question

I want to open a jQuery UI dialog box and the box will have an input field which will take username. I want that when user presses the OK key on the dialog box, the dialog should return the username back to jQuery somehow

$("#dialog").dialog({
            autoOpen: false,
            width: 600,
            buttons: {
                "Ok": function() {
                $(this).dialog("close");}}
        });

You can grab the value put into the box using val() as you would any standard input box. Is there something specific you're trying to do with the value? — Rory McCrossan
– Rory McCrossan, Commented Apr 30, 2012 at 12:47

EyalAr · Accepted Answer · 2012-04-30 12:51:21Z

2

A dialog is asynchronous, which makes it meaningless to "return" something.
You can, however, use one of the callback functions to perform actions with the user input.
For example, using the 'OK' button callback:

$("#dialog")
    .append(
        $("<input>")
            .attr({
                "type" : "text",
                "id" : "user-input"
            })
    )
    .dialog({
        autoOpen: false,
        width: 600,
        buttons: {
            "Ok": function() {
                alert( $("#user-input").val() );
                $(this).dialog("close");
            }}
    });

answered Apr 30, 2012 at 12:51

EyalAr

3,1801 gold badge24 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user1364146 Over a year ago

so when i click ok will i be able to access the $("#user-input").val() variable in the jquery script

EyalAr Over a year ago

yes, because as long as the dialog is open, '#user-input' is part of the DOM.

Fiona - myaccessible.website · Accepted Answer · 2012-04-30 12:46:41Z

2

If you just have a div on your page with ID dialog that contains the input field, just select it using a regular jQuery selector when the user presses OK.

answered Apr 30, 2012 at 12:46

Fiona - myaccessible.website

15k17 gold badges85 silver badges118 bronze badges

Comments

coder · Accepted Answer · 2012-04-30 12:50:24Z

1

Try this on "OK" funcion

var myvalue= $("#yourinputtext").val();
alert(myvalue);

answered Apr 30, 2012 at 12:50

coder

13.2k32 gold badges116 silver badges221 bronze badges

Comments

Rory McCrossan · Accepted Answer · 2012-04-30 12:53:58Z

1

You can capture the value in the ok button click handler, and then do with it as your require:

$("#dialog").dialog({
    autoOpen: false,
    width: 600,
    buttons: {
        "Ok": function() {
            var inputValue = $("#myInput").val();
            // do stuff with the value...

            $(this).dialog("close");}
        }
    }
);

answered Apr 30, 2012 at 12:53

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

Collectives™ on Stack Overflow

How to return user input from jQuery UI dialog box

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related