How to capture result of a custom dialog? #572

Closed
ericscheid opened this Issue Jan 7, 2017 · 4 comments

Projects

None yet

2 participants

@ericscheid

If I create a custom dialog with bootbox.dialog (...) and I pass in a few <input> (etc) elements, how do I obtain the values of those <input> elements once the user hits the OK button?

I tried using callback: function(result) {console.log(result)} but nothing ever shows up.

@ericscheid
ericscheid commented Jan 7, 2017 edited

A workaround .. use bootbox.confirm(...) instead, which does call the callback function (and also automatically inserts the OK and Cancel buttons, unlike bootbox.dialog).

dialog = bootbox.confirm ({
  title: "Here is a tiny form", 
  message: contentNode, // contains various <input>, <textarea>, and <select> elements
  callback: function(result) {
      if (result) {
        results = {};
        results.fieldname1 = dialog[0].querySelector("[name=fieldname1]").value;
        results.fieldname2  = dialog[0].querySelector("[name=fieldname2]").value;
        results.fieldname3 = dialog[0].querySelector("[name=fieldname3]").value;
        doStuffWithResults(results);
      }
    }
  }
);

function doStuffWithResults(results) {console.log('results: ', results);}

(N.B. If your form has <input type=radio> or <input type=checkbox> or <select multiple>, then you have to do some extra work testing .checked or .selected instead of simply accessing .value)

I used bootbox.confirm and not bootbox.prompt because although the latter is semantically appropriate I need to replace the prompt part and so forth. Sometimes the hammer is not the right tool, even if the problem is a nail.

So, apart from philosophical objections to extending the semantics of "confirm", are there any problems with this approach?

@ericscheid

Would be real nice if we could do bootbox.prompt(inputType='form', inputOptions=formNode) and it returns an array of named values.

5.0?

@tiesont
Collaborator
tiesont commented Jan 10, 2017

To answer your original question:

You would use the callback for your "OK" button in combination with something like find(). For example:

var dialog = bootbox.dialog({
    title: 'A custom dialog',
    message: /* your form markup here */,
    buttons: {
        ok: {
            label: 'OK',
            className: 'btn-primary',
            callback: function(){
                
                var form = dialog.find('form');
                var data = form.serialize();
                
                /* data is serialized to a format suitable for using in $.ajax, $.post, etc. */
            }
        }
    }
});

Dialog-level callbacks for anything other than confirm and prompt won't have a response/result value, so you're correct in seeing nothing there.

@ericscheid

Thanks. I also found https://github.com/macek/jquery-serialize-object which handles some extra quirks.

@ericscheid ericscheid closed this Jan 16, 2017
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment