Extract & call JavaScript function defined in the onclick HTML attribute of an element(using jQuery attr/prop)

Question

I am having 2 buttons A & B and I need to call the function defined in onclick HTML attribute of button B but on click of button A.

Also I need to pass an extra param to that function in this case. buttons are like:

<input type="button" id="btn_a">  
<input type="button" id="btn_b" onclick="return doSomething(p,q)">

I want to make a call like:

doSomething(p,q,r) // 3rd param to identify that it was clicked via button A

Button B is actually a variable button & gets the p,q params dynamically & I need to pass the 3rd param along.

button B can have onClick attribute like

onClick= return doSomething(122,334) or return doSomething(abc,54)

or any other values. I need to call the function such that

doSomething(122,334,'btn_a') or

doSomething(abc,54,'btn_a')

how to achieve this using jQuery/JS? I was able to call the function using the .prop() but couldn't figure out passing the additional param.

I was able to call the function like:

<script>
    jQuery('#btn_a').on('click',function(){
      (jQuery('#btn_b').prop('onclick'))(); //this can invoke the function but how to pass the additional param?
    })
  </script>

thanks in advance. :)

stackoverflow.com/a/36078980/4763793

Rino Raj
– Rino Raj

2016-03-18 07:57:26 +00:00
Commented Mar 18, 2016 at 7:57 — Rino Raj
– Rino Raj, Commented Mar 18, 2016 at 7:57

Ammar Hasan · Accepted Answer · 2016-03-18 07:55:09Z

1

You can do it like this, i.e. use attr instead of prop to get the string value of b's onclick, afterwards replace the arguments p,q from the string with p,q,r and then use Function constructor to create an anonymous function with the new body (after replace).

jQuery('#btn_a').on('click', function(){
    var onclickB = jQuery('#btn_b').attr('onclick'),
        onclickA = Function(onclickB.replace("p,q", "p,q,r"));
    return onclickA();
});

Note: you can do anything with this approach, just create a regex pattern to replace anything with what you want.

answered Mar 18, 2016 at 7:55

Ammar Hasan

2,51418 silver badges24 bronze badges

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

7 Comments

techie_28 Over a year ago

I was thinking the same way but I wondered if prop can help me invoke the function there might be a way as well to pass an additional param using a JS feature?

Ammar Hasan Over a year ago

actually what prop returns is a function like function onclick () { return doSomething(122,334); }, so even if you can pass custom arguments to the outer function onclick, there is no such way (besides parsing as string) to pass those params to internal function calls.

techie_28 Over a year ago

if by using attr we extract "doSomething(122,334)" can I pass the param with any other way instead of replace?

techie_28 Over a year ago

I was thinking if that was possible by using call apply or some of inner JS feature that I dont know

techie_28 Over a year ago

Not exactly the solution but I used this idea..thanks Ammar.. :)

|

Naman Nehra · Accepted Answer · 2016-03-18 07:41:56Z

0

<input type="button" id="btn_a" onclick="return doSomething(p,q,r)">

answered Mar 18, 2016 at 7:41

Naman Nehra

5925 silver badges12 bronze badges

2 Comments

Rino Raj Over a year ago

that wont do because p & q are assigned dynamically – techie_28 3 mins ago

Kyll Over a year ago

While this code snippet may solve the question, including an explanation really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion.

Bikee · Accepted Answer · 2016-03-18 07:47:24Z

0

You need to make the function doSomething like below, pass null for btn_b and pass value for btn_a. Hope this helps.

HTML

<input type="button" id="btn_a">  
<input type="button" id="btn_b">

SCRIPT

$("#btn_a").on("click", function() {
        return doSomething(p,q,r);
    });


$("#btn_b").on("click", function() {
        return doSomething(p,q,null);
    });


function doSomething(p,q,r){
        if(r != null){
        //do something for btn_a and return
        } else {
        //do something for btn_b and return
        }

    }

edited Mar 18, 2016 at 7:47

answered Mar 18, 2016 at 7:41

Bikee

1,1978 silver badges21 bronze badges

2 Comments

techie_28 Over a year ago

that wont do because p & q are assigned dynamically

techie_28 Over a year ago

button B is in a loop & gets p & q from there,so it is like onClick= return doSomething(1123,3335) or any other numbers strings.I need to get it from the onClick attrib & then call it with additional param

itzmukeshy7 · Accepted Answer · 2016-03-18 08:05:05Z

To make it simple you can set some global variables/object you want to pass into function as parameters and then call the function and use global variables/object property value.

What you say ;)

/* with variables in global scope should be accessible inside function going to call */
param1 = 1;
param2 = 2;

/* function definition */
function functionCalling(){
  /* use values here */
  console.log(param1, param2);
}

...
functionCalling();
...

/* with variables in global scope should be accessible inside function going to call */
param = {property1:1, property2:2};

/* function definition */
function functionCalling(){
  /* use values here of object */
  console.log(param.property1, param.property1);
}

...
functionCalling();
...

Collectives™ on Stack Overflow

Extract & call JavaScript function defined in the onclick HTML attribute of an element(using jQuery attr/prop)

4 Answers 4

7 Comments

2 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

7 Comments

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related