Question

I’m opening a dialog using a .load function and then I want to grab the values from the fields in the dialog defining the variables outside the dialog function, but it returns undefined, so my question is, how do I define the variables outside the dialog function to use it inside it,

An example what I want to do.

First I request the dialog:

$( '#dialog-form' ).load('table_models/add_to_table.php',function(){
     $( '#dialog-form' ).dialog('open');
});

Now I define the variables and the dialog popup:

$(function() {
    var sku = $( "#sku" ),
    fba_sku = $( "#fba_sku" ),
    asin = $( "#asin" ), 

    $( "#dialog-form" ).dialog({
         title: 'New Product',
         autoOpen: false,
         height: 'auto',
         width: 'auto',
         modal: true,
         buttons: {
                "Done": function() {
                             // I want to get the var sku, fba_sku, asin here
                 }
         },
     }
}

I hope you understand what I want to do, if not I will try to explain it better,

Thanks

EDIT

The .load function being requested from a button on page, then the dialog function is on external JS file, there I want to define first the var of the fields from the dialog form and reuse it for all functions on this page.

Answer 1

Try defining the function outside the object, like so:

var cb = function() { /* stuff with sku, fba_sku, asin */ };
$("#dialog-form").dialog({
    ...
    buttons:{"Done":cb}
});