Диалоговое окно JQuery с текстовым полем ввода

Question

Я хочу использовать диалог jquery для сбора информации о пользователе (например, имя пользователя). Как мне сделать это с помощью Jquery и собирать данные в переменную Javascript?

Это моя попытка до сих пор:

// Dialog here, how to rewrite this? 
$('<form> <input type="text" style="z-index:10000" name="name"> <br> </form>').dialog({modal:true}); 

// push data to Parse 
var Label = Parse.Object.extend("Label"); 
var result = new Label(); 
result.set("labels", localStorage.getItem("labels")); 
result.set("name", name); 

result.save(null, { 
    sucess : function(result) { 
    alert("Stored data sucessfully!"); 
    }, 
    error: function(result, error) { 
    alert("Error submitting data, error code:" + error.message); 
    } 
}); 

Однако я не мог вводить текст еще.

Answer 1

Код, обрабатывающий диалог, должен находиться в его функции onClose.

$('<form> <input type="text" style="z-index:10000" class="name"> <br> </form>').dialog({ 
 
    modal: true, 
 
    onClose: function() { 
 
    var name = $(this).find(".name").val(); 
 
    var Label = Parse.Object.extend("Label"); 
 
    var result = new Label(); 
 
    result.set("labels", localStorage.getItem("labels")); 
 
    result.set("name", name); 
 

 
    result.save(null, { 
 
     sucess: function(result) { 
 
     alert("Stored data sucessfully!"); 
 
     }, 
 
     error: function(result, error) { 
 
     alert("Error submitting data, error code:" + error.message); 
 
     } 
 
    }); 
 
    } 
 
});

Answer 2

Вы можете поместить любую функцию вы хотите в разделе buttons поэтому, когда пользователь нажимает кнопку ОК, вы обрабатываете информацию о них потом. Документы для этого: here. Например:

$('<form><input type="text" style="z-index:10000" name="name"><br></form>').dialog({ 
    modal: true, 
    buttons: { 
    'OK': function() { 
     var name = $('input[name="name"]').val(); 
     storeData(name); 
     $(this).dialog('close'); 
    }, 
    'Cancel': function() { 
     $(this).dialog('close'); 
    } 
    } 
}); 

Вот скрипка, который показывает это в действии (хотя и без учета стиля): http://jsfiddle.net/duffmaster33/zuervqop/1/