How to wire click event with argument when create input

Discussion in 'Javascript' started by quoclinh, Jun 22, 2007.

  1. quoclinh

    quoclinh Guest

    Hi,

    I have the following function that works. It would create an input
    that would invoke a click event that call a javascript function:

    function createButton(text)
    {
    var btn = document.createElement('input');
    btn.type = 'submit';
    btn.value = text;
    btn.setAttribute('onclick', 'execAction()'); //this does not
    work
    btn.setAttribute('class', 'CustomButton'); //this does not
    work
    btn.onclick = execAction; //this works
    return btn;
    }

    function execAction()
    {
    alert('in execAction');
    return false;
    }

    The question is, if I have an execAction function with an argument,
    how do I change the code in createButton to accomodate it?

    Thanks in advance,
    Quoc Linh
    quoclinh, Jun 22, 2007
    #1
    1. Advertising

  2. On Jun 22, 12:10 am, quoclinh <> wrote:
    > Hi,
    >
    > I have the following function that works. It would create an input
    > that would invoke a click event that call a javascript function:
    >
    > function createButton(text)
    > {
    > var btn = document.createElement('input');
    > btn.type = 'submit';
    > btn.value = text;
    > btn.setAttribute('onclick', 'execAction()'); //this does not
    > work
    > btn.setAttribute('class', 'CustomButton'); //this does not
    > work
    > btn.onclick = execAction; //this works
    > return btn;
    >
    > }
    >
    > function execAction()
    > {
    > alert('in execAction');
    > return false;
    >
    > }
    >
    > The question is, if I have an execAction function with an argument,
    > how do I change the code in createButton to accomodate it?
    >



    Maybe try:

    //....

    btn.onclick = execAction;
    btn.args = createButtonArgs;
    return btn;

    function execAction() {

    this.args*2.14159
    // etc...
    }
    Skye Shaw!@#$, Jun 22, 2007
    #2
    1. Advertising

  3. quoclinh

    RobG Guest

    On Jun 22, 5:10 pm, quoclinh <> wrote:
    > Hi,
    >
    > I have the following function that works. It would create an input
    > that would invoke a click event that call a javascript function:

    [...]
    > btn.onclick = execAction; //this works

    [...]
    >
    > The question is, if I have an execAction function with an argument,
    > how do I change the code in createButton to accomodate it?


    btn.onclick = function() {
    execAction(arg1, arg2, ...);
    }

    Incidentally, if you want a function that fires when a form is
    submitted, you are much better off to put it on the form's onsubmit
    handler rather than the submit button's onclick handler.


    --
    Rob
    RobG, Jun 22, 2007
    #3
  4. quoclinh

    Guest

    On 22 juin, 16:31, Michael White <> wrote:
    > Skye Shaw!@#$ wrote:
    > > On Jun 22, 12:10 am, quoclinh <> wrote:

    >
    > >>Hi,

    >
    > >>I have the following function that works. It would create an input
    > >>that would invoke a click event that call a javascript function:

    >
    > >>function createButton(text)
    > >>{
    > >> var btn = document.createElement('input');
    > >> btn.type = 'submit';
    > >> btn.value = text;
    > >> btn.setAttribute('onclick', 'execAction()'); //this does not
    > >>work
    > >> btn.setAttribute('class', 'CustomButton');

    >
    > btn.className='CustomButton';
    > btn.onclick=execAction;
    >
    > Mick
    >
    > //this does not
    >
    > >>work
    > >> btn.onclick = execAction; //this works
    > >> return btn;

    >
    > >>}

    >
    > >>function execAction()
    > >>{
    > >> alert('in execAction');
    > >> return false;

    >
    > >>}

    >
    > >>The question is, if I have an execAction function with an argument,
    > >>how do I change the code in createButton to accomodate it?

    >
    > > Maybe try:

    >
    > > //....

    >
    > > btn.onclick = execAction;
    > > btn.args = createButtonArgs;
    > > return btn;

    >
    > > function execAction() {

    >
    > > this.args*2.14159
    > > // etc...
    > > }


    You can also create a class to store the argument of your method and
    the method itself:

    function argumentWrapper(String arg1,String arg2){
    this.arg1=arg1;
    this.arg2=arg2;

    this.exec=execAction;

    function execAction(){
    arg1*arg2;
    //etc..
    }
    }

    wrapper = new argumentWrapper(arg1,arg2);
    btn.onClick=wrapper.exec;
    , Jun 26, 2007
    #4
  5. quoclinh

    quoclinh Guest

    On Jun 22, 1:56 am, RobG <> wrote:
    > On Jun 22, 5:10 pm, quoclinh <> wrote:
    >
    > > Hi,

    >
    > > I have the following function that works. It would create an input
    > > that would invoke a click event that call a javascript function:

    > [...]
    > > btn.onclick = execAction; //this works

    > [...]
    >
    > > The question is, if I have an execAction function with an argument,
    > > how do I change the code in createButton to accomodate it?

    >
    > btn.onclick = function() {
    > execAction(arg1, arg2, ...);
    > }
    >
    > Incidentally, if you want a function that fires when a form is
    > submitted, you are much better off to put it on the form's onsubmit
    > handler rather than the submit button's onclick handler.
    >
    > --
    > Rob


    Hi all,

    Thank you for all your solutions! I really appreciate it. I chose to
    go with RobG solution and it's work beautifully. However, being able
    to pass the argument value dynamically instead of fixed value would be
    tremendously useful as well. I will try other methods when time
    allowed.

    Thanks again for all your help!

    Quoc Linh
    quoclinh, Jun 26, 2007
    #5
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Derrick

    wire enter to button click

    Derrick, Jun 29, 2004, in forum: ASP .Net
    Replies:
    3
    Views:
    332
    Derrick
    Jul 2, 2004
  2. Alex
    Replies:
    2
    Views:
    1,961
  3. Chu
    Replies:
    2
    Views:
    902
    Winista
    Apr 10, 2006
  4. sonic
    Replies:
    0
    Views:
    510
    sonic
    Jun 26, 2006
  5. Russ
    Replies:
    2
    Views:
    428
Loading...

Share This Page