使用带有输入文本框的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);
  }
});

然而我还不能输入文本。

- Dzung Nguyen

Answer 1

您可以在 buttons 部分中放置任何功能，因此当用户点击“确定”时，您可以处理他们的信息。这方面的文档在 此处。例如：

$('<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/

- Duffmaster33

Answer 2

处理对话框的代码应该在其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);
      }
    });
  }
});

- Barmar

---

如果您这样做，当用户点击取消时，您将处理结果。 - Levesque