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. :)

http://stackoverflow.com/a/36078980/4763793 – Rino Raj Mar 18 '16 at 07:57 — Rino Raj, Mar 18 '16 at 07:57

score 1 · Accepted Answer · answered Mar 18 '16 at 07:55

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 '16 at 07:55

Ammar Hasan

2,436
16
22

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? – techie_28 Mar 18 '16 at 08:00
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. – Ammar Hasan Mar 18 '16 at 08:04
if by using attr we extract "doSomething(122,334)" can I pass the param with any other way instead of replace? – techie_28 Mar 18 '16 at 09:21
I was thinking if that was possible by using call apply or some of inner JS feature that I dont know – techie_28 Mar 18 '16 at 09:33
moreover to do onclickB.replace("p,q", "p,q,r") I will need to extract p & q from the attr retrieved string. – techie_28 Mar 18 '16 at 09:38
1

Not exactly the solution but I used this idea..thanks Ammar.. :) – techie_28 Mar 18 '16 at 09:55
If the additional param is a variable containing an object or array we will have to stringify it as it cant be attached directly.. what do you say? – techie_28 May 18 '16 at 06:05

Bikee · Answer 2 · 2016-03-18T07:47:24.763

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 '16 at 07:47

answered Mar 18 '16 at 07:41

Bikee

1,197
8
21

that wont do because p & q are assigned dynamically – techie_28 Mar 18 '16 at 07:47
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 – techie_28 Mar 18 '16 at 07:52

score 0 · Answer 3 · answered Mar 18 '16 at 07:41

0

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

answered Mar 18 '16 at 07:41

Naman Nehra

630
4
10

1

that wont do because p & q are assigned dynamically – techie_28 3 mins ago – Rino Raj Mar 18 '16 at 07:51
While this code snippet may solve the question, [including an explanation](http://meta.stackexchange.com/questions/114762/explaining-entirely-code-based-answers) 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. – Kyll Mar 18 '16 at 09:33

score 0 · Answer 4 · answered Mar 18 '16 at 08:05

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();
...

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

4 Answers4

Linked