CODEWITHSUNDEEP
javascriptjquery
Rajesh Dhiman
Rajesh Dhiman

Reputation: 1896

How to pass dynamic parameters to a radio button change event

I have multiple buttons which is calling a function on click event. In that function I am binding change event of a Radio Button control with some dynamic parameters. I am able to bind change event to radio box control. But not able to get parameters values.

function ButtonClickFunction(one, two) {

    $('input[type = "radio"]').change(function (one, two) {

        console.log(one); // shows a radio button object
        console.log(two); // gives undefined
    });
}

What I am getting in the console is the radio button object and undefined. I am sure I am doing something wrong, but don't know What? Any help will be appreciated.

Update: I have multiple buttons calling the same function, using the answers given the values get doubled. I mean i am getting multiple values.

eg: Passing some integer as variables:
on first button click got 1,2.
and then on second button click got 1,2,3,4.

Upvotes: 2

Views: 1640

Answers (4)

code-jaff
code-jaff

Reputation: 9330

well, to be clear, when you call ButtonClickFunction what it does is registering a new handler for click event, therefore when you click multiple times handlers get stacked, and executed. Hence for the first time only one handler, for second time two handlers and so on.

The trick is, just pulling out that handler registration out of the function or off the bindings before register new handler like 

function ButtonClickFunction(one, two) 
{
    $('input[type= "radio"]').off('change').on('change', function (e) {
        console.log(one);
        console.log(two);
    });
}

hope this makes sense

Upvotes: 0

Fabricio
Fabricio

Reputation: 839

Try this:

function ButtonClickFunction(one, two) {

    $('input[type = "radio"]').change(function () {

        console.log(one);
        console.log(two);
    });
}

As said by others, the handler functions has its predefined parameters. Please read the docs for .change()

Furthermore, your code shows a radio button object for one because the first expected parameter for that handler function is the object that changed (your radio button). two shows undefined because the handler expects only one or no parameters thus making the second parameter undefined.

Upvotes: 0

BenM
BenM

Reputation: 53228

You should use on(), and then pass the additional information in to the handler function using the second parameter:

$('input[type= "radio"]').on('change', { 'one': one, 'two': two }, function (e) {
    console.log(e.data.one);
    console.log(e.data.two);
});

That having been said, you should be able to access them in the callback, just don't pass them to it:

function ButtonClickFunction(one, two) 
{
    $('input[type="radio"]').change(function () {
        console.log(one);
        console.log(two);
    });
}

Upvotes: 2

tymeJV
tymeJV

Reputation: 104785

The anonymous function has an event as the first parameter by default, hence why your logging of one returns the object. If you want access to the one and two variables of the parent function, simply leave the parameters off the anonymous function and you'll already have access due to how they're scoped.

function ButtonClickFunction(one, two) {
    //EVERYTHING INSIDE THIS FUNCTION HAS ACCESS TO "ONE" AND "TWO
    //INCLUDING YOUR CHANGE EVENT
    $('input[type = "radio"]').change(function (e) {
        //you have access!
    });
}

Upvotes: 0

Related Questions