Scenario

In a GUI, a user inserts some text in a text input and then clicks a button: inserted text will be displayed in a div.

I have found a trivial solution (demo here), that is setting the output text inside the handler accessing the input element object. It sucks. Rather, I would pass the input text (not the element) to the handler.

Question

How can I pass parameters (the input message text in this case) to the handler function?

Scenario

In a GUI, a user inserts some text in a text input and then clicks a button: inserted text will be displayed in a div.

I have found a trivial solution (demo here), that is setting the output text inside the handler accessing the input element object. It sucks. Rather, I would pass the input text (not the element) to the handler.

Question

How can I pass parameters (the input message text in this case) to the handler function?

• javascript
• jquery
• event-handling

• 1 you need to access to the input element in some way: you have to get the value of the input when you click the button. You may avoid to hardcode the reference to the input but you still need to access it inside the handler – Fabrizio Calderan Commented Sep 21, 2012 at 9:00

4 Answers 4

I modified the code in your jsFiddle. In jQuery, you can pass data as an argument and access it using event.data jQuery reference.

/*
 * I would not to referer UI elements here
 * Rather I would pass the $('#txtMessage').val() to the handler
 */

That is impossible.

If you want to use the current value of that input element then you have to access the UI element itself.

If your intent is to decouple the event handler from knowing which specific element is to be accessed, that's easily done by using event data to pass it to the handler, e.g.:

$(sel).on('click', {
   source: document.getElementById('txtMessage')
}, handler);

and the in the callback:

function handler(event) {
    var txt = event.data.source.value;
    ...
}

Note that the jQuery event data is supposed to be a map of key: value pairs as shown above. Passing in a jQuery object directly as shown in the accepted answer could easily break.

Check this - http://api.jquery.com/event.data/

Your JS would be something like this (untested):

$('#myButton').on("click", {val: $('#txtMessage').val()}, function(event){
    $('#divOutput').html(event.data.val);
});​

This will give you the current value of the input element. It basically still accesses the input element but there's no way to avoid that if you wish to acquire the current value

$('#myButton').on("click", {val: function (){ return $('#txtMessage').val()}}, function(event){
    $('#divOutput').html(event.data.val());
});​