jConfirm access value from injected HTML element

Question

I have this code which makes a fancy jQuery alert box with several inputs:

//jConfirm( message, [title, callback] )
    $('#buttonNew').click(function(){
             jConfirm('<form><input id="postTitle" type="text"/><br/><textarea id="postBody"></textarea></form>', 'New Post',
             function(r){if(r==true){
                    alert($('#postTitle').val()); //Expecting the input value but getting "undefined"
                                  }
                         });
                         })

When I try to use the value entered into the inputs (such as with an alert() for testing as shown above) I'm getting "undefined". How do I access those values of the injected HTML inputs from within the callback function?

score 1 · Accepted Answer · edited May 23 '17 at 11:59

The code you've posted appears to be syntactically correct, and the conditional statement in the callback is obviously coming through as true (hence the alert) - which must mean that it's unable to retrieve the value of the element.

Im pretty sure this is because jQuery is being initialised when the document (DOM) is ready, so the injected HTML doesn't actually exist at that point - it's injected in to the DOM later; dynamically.

I can't seem to find any jConfirm examples that utilise HTML forms like that; so I'm going to go out on a limb and assume this is the issue.

There is a very good discussion about this issue on the jQuery website. You essentially need to reload the DOM so jQuery becomes aware of all the elements it's working with. It can cause alsorts of issues when embedding HTML in pages dynamically, where event handlers are concerned you can just use $.live() (as demonstrated here) however accessing the values of such elements appears to be a much more complicated affair!

If this is the case then a simple little workaround would be to do something like this...

var title; //in global scope.. yucky!

/* set a -live- event listener to fire whenever 
** postTitle is modified; dumping the value in to
** our global var */
$('#postTitle').live('change',function(r){
    title = $(this).val();
});

/* then just access the 'title' var */

All this simply does is have an event listener that is attached to any elements that have the id of 'postTitle' regardless of when they were inserted in to the DOM. Whenever a 'postTitle' is changed this event listener is called and dumps the new value in to a global variable; i.e - allowing you to access it anywhere in scope - so your whole codebase. (I wouldn't usually advocate global variables - but in this case it's more a proof of concept/troubleshooting step ;))

As this may not be the issue though, try and see if you can access the value through a developer console. (firebug etc) Then try checking different browsers and see if it's a universal behaviour. I think the most likely problem is going to be the DOM though; in which case I can't think of many ways of working around it without using global vars. (Well, no simple ways)

jConfirm access value from injected HTML element

1 Answers1