Multiple Function Calls with One Onclick Attribute
This question comes up from time to time. And the methods I've seen on the Internet are a bit short of complete.
The question is, "How do I run more than one JavaScript function with one onclick= or onsubmit= call?" and variations thereof.
The technique is the same whether the attribute is onclick or onsubmit.
Let's suppose these functions need to run when a submit button is clicked:
One() Two() Three() Four()
The methods I've seen on the Internet would suggest making a new function that calls each function, in turn. Then, call that new function with the onsubmit attribute.
Example:
<script type="text/javascript">
function DoAllThese() {
One();
Two();
Three();
Four();
}
</script>
Then, call the DoAllThese() function with this attribute value:
onclick="DoAllThese()"
Update: A reader used the "was this post helpful" comment box at the end of this article to ask about providing parameters for some of the functions that are run.
When the DoAllThese() function is called, provide it with the parameters needed when it runs the functions in its code.
The DoAllThese() function contains two parameters in this example.
onclick="DoAllThese('one','another')"
Those two parameters are used in functions Two() and Three():
<script type="text/javascript">
function DoAllThese(param1,param2) {
One();
Two(param1);
Three(param2);
Four();
}
</script>
It works just fine in many instances — image tag onclick attributes, link onclick attributes, and some form field onclick attributes.
A lack is observed when a false return value of any of the functions needs to abort form processing.
For that functionality, the modified DoAllThese() function returns the value of the first function that returns a value of false. If none of the functions return a value of false, then DoAllThese() returns the value of the last function it called.
Here is the modified DoAllThese() function:
<script type="text/javascript">
function DoAllThese() {
var retvalue;
retvalue = One();
if(retvalue == false) { return retvalue; }
retvalue = Two();
if(retvalue == false) { return retvalue; }
retvalue = Three();
if(retvalue == false) { return retvalue; }
return Four();
}
</script>
The onclick attribute's value is modified accordingly:
onclick="return DoAllThese()"
Now, sleep well :)
Will Bontrager
