JavaScript: Changing a Button’s onClick Programmatically Client-Side

June 2, 2006 at 2:10 pm 14 comments

Today we had a QualTrax customer who wanted to override the onClick call of one of our form buttons and add in a quick popup reminder.  Since this was a standard HTML button in a standard HTML form, it seemed like it would be fairly easy via JavaScript in the screen's flexible footer.  It seemed like we could just do:

document.FormName.ButtonName.onclick="alert('Here is a pop up message');"

However, when I tested that change, the results were a little boring.  The page just sat there idle.  No pop message, no errors, nothing.  So I did some research.

It turns out the onclick property of the button is expecting not a string like I was passing in, but an actual function reference.  A quick revisement produced the desired behavior:

document.FormName.ButtonName.onclick= function() {alert('Here is a pop up message');};

And actually– wrapping it in an impromptu function turned out to be quite handy.  There were already other activities going on with the button's out-of-the-box onClick event that we wanted to preserve.  We were able to just include them into the function:

document.FormName.ButtonName.onclick= function() {alert('Here is a pop up message');OriginalJavaScriptCall1();OriginalJavaScriptCall2();};

Now when they click on the button– they get the pop message and then it moves on to finish the rest of its usual tasks.

We tested this script call successfully in Internet Explorer 6.0 SP2, Netscape 7.2 and FireFox 1.0.4.

Entry filed under: JavaScript, Web Development.

Dogs vs. Honor Students Grayson Highlands and Mount Rogers National Recreation Area

14 Comments Add your own

  • […] September 14, 2007 Dang.  This afternoon, on a short timeframe, I had to override the behavior of an HTML form button.  I couldn’t change the button itself (it was generated by compiled code that I did not have access to), but luckily, I already knew how to programmatically change the onClick event via JavaScript.  […]

    Reply
  • 3. Gilberto  |  January 8, 2009 at 1:59 pm

    Wow man you saved my life, I have been breaking my head with this for about 3 days and now it’s solved 😀
    Thanks so much

    Reply
  • 4. Milimetr  |  February 24, 2009 at 2:27 pm

    It seems that if you want to set for an onClick event a function that needs some parameters, you need to CREATE a function (element.onClick = new Function(params)).
    See:
    http://www.codingforums.com/archive/index.php/t-55356.html
    and a reference for Function class, e.g.:
    http://docs.sun.com/source/816-6408-10/function.htm
    or
    http://devedge-temp.mozilla.org/library/manuals/2000/javascript/1.5/reference/function.html#1193137

    Reply
  • 5. Paul Baylis  |  April 15, 2009 at 4:15 pm

    Thanks so much for posting this. Saved me a bunch of time.

    Reply
  • 6. Wolfang Pinkert  |  February 19, 2010 at 6:23 am

    Thank you very much! Took me about 4 hours of try, error and research.

    Reply
  • 7. svend  |  November 9, 2010 at 1:25 pm

    Thanks indeed!

    Reply
  • 8. bnmng  |  June 11, 2011 at 12:50 pm

    Thank you. This really helped, five years after you posted it!

    But I wanted to call an existing function. This works in Firefox, I didn’t test other browsers:

    document.getElementById(“buttonname”).onclick=function() { someFunction(parameter, otherparameter) };

    Reply
  • 9. Nathan  |  July 14, 2011 at 10:16 am

    This concept worked for me, however when it runs instead of “onclick” it basically does it onload. My situation is to have a dynamically created JavaScript button redirect when clicked to a different page of the website.

    var button = document.createElement(“INPUT”);
    button.type = “button”;
    button.value = “Main Menu”;
    button.name = “btnMain”;
    button.onclick=window.location=’main.html’;
    tblBody.appendChild(button)

    any ideas why it is behaving this way?

    Reply
  • 10. technomixx.com  |  July 15, 2011 at 10:50 am

    nice information shared .. thanks

    Reply
  • 11. YC  |  January 24, 2012 at 1:51 pm

    Thanks, this was really useful: “It turns out the onclick property of the button is expecting not a string like I was passing in, but an actual function reference.” Couldn’t get this to work for the last hour or so!

    Reply
  • 12. GET A FREE TWITTER BACKGROUND  |  April 26, 2012 at 2:58 am

    Thanks for this TGAW, I was stuck this afternoon!

    Reply
  • 13. tr  |  May 25, 2012 at 10:05 am

    rtret

    Reply
  • 14. Suggested Webpage  |  May 14, 2013 at 12:49 am

    This can be another activity that can lead to a large amount of revenue for online
    businessmen as well as for those who want to promote their products on Facebook.
    Your actions can be observed very easily at the same time.
    Facebook can give teenagers a false sense of privacy and a feeling of anonymity that can put
    them in danger.

    Reply

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Trackback this post  |  Subscribe to the comments via RSS Feed


Flickr Photos

3D Printed Products

Tweets


%d bloggers like this: