Jquery dialog with input textbox

Question

I want to use jquery dialog to collect user information( user name for example). How do I do that with Jquery and collect data into Javascript variable?

This is my attempt so far:

// 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);
  }
});

However I couldn't enter text yet.

Duffmaster33 · Accepted Answer · 2015-06-02 20:52:46Z

6

You can put any functionality you want in the buttons section so when the user clicks ok, you process their info then. The docs for this are here. For instance:

$('<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');
    }
  }
});

Here is a fiddle that shows this in action (albeit with no styling): http://jsfiddle.net/duffmaster33/zuervqop/1/

edited Jun 2, 2015 at 20:52

answered Jun 2, 2015 at 20:00

Duffmaster33

1,1889 silver badges17 bronze badges

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

Comments

Barmar · Accepted Answer · 2015-06-02 19:54:56Z

-1

The code that processes the dialog should be in its onClose function.

$('<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);
      }
    });
  }
});

answered Jun 2, 2015 at 19:54

Barmar

789k57 gold badges555 silver badges669 bronze badges

1 Comment

Levesque Over a year ago

You will process the results when the user hits cancel if you do it this way

Collectives™ on Stack Overflow

Jquery dialog with input textbox

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related