If you are implementing AJAX, you will likely run into the need to change the functionality of a button dynamically. There is not a whole lot out there on how to quickly accomplish this so here is a simple explanation.

Typically, you have an element such as an “input”, “a” or “select (options)” that has an attribute of “onClick”, “onMouseOver” or “onChange” with a value of some function that will execute upon the event represented by the attribute.

UPDATE: This has been changed to accommodate ie. The following way will work in both Firefox and Internet Explorer:

button_element.onclick = function() {doSomething();};

Thanks! to this post. (note: the answer is at the bottom of the post after some discussion.) Thanks for sharing

To assign a new value to the attribute, you need to identify the element you want to change like this:

elem =  document.getElementById(”myElementId”)

Then simply assign the new value to the attribute like this:

elem.attributes["onclick"].value = “myUpdatedFunction(’My parameter’)” ;

Now, if someone clicks on the element, the new updated version of myUpdatedFunction() will be called. Notice that you can even pass a parameter to the function this way. Just be sure to nest your quotes properly.

This method will also work for other attribute types such as onMouseOver, onChange an so on.

I hope this helps.

Tags: AJAX, User Iterface Design, javaScript Tips by admin
No Comments »