Software, your way.
How To Get Good Custom Software
(Download)
(PDF)
burger menu icon
WillMaster

WillMasterBlog > JavaScript

FREE! Coding tips, tricks, and treasures.

Possibilities weekly ezine

Get the weekly email website developers read:

 

Your email address

name@example.com
YES! Send Possibilities every week!

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.

file carpenter tools.png

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()"

file bass_clef_01.png

Now, sleep well :)

Will Bontrager

Was this blog post helpful to you?
(anonymous form)

Support This Website

Some of our support is from people like you who see the value of all that's offered for FREE at this website.

"Yes, let me contribute."

Amount (USD):

Tap to Choose
Contribution
Method


All information in WillMaster Blog articles is presented AS-IS.

We only suggest and recommend what we believe is of value. As remuneration for the time and research involved to provide quality links, we generally use affiliate links when we can. Whenever we link to something not our own, you should assume they are affiliate links or that we benefit in some way.

Recent Articles in the Library

Fixed-position Table Header

During a vertical scroll, the table header scrolls out of view -- unless the header is fixed in position.

Simple Floating Menu

When not needed, the menu on the left side of a web page retracts to be out of the way. Tap it and it expands.

CSS Drop Shadows for Images

Images can be given drop shadows using pure CSS.

Ajax File Upload

Learn how to upload a file as soon as a file upload form field is given a file to upload.

Another Form Spam Prevention Technique

This technique should stop much or most of the form spam you are experiencing, perhaps even all of it.

Star Rating in a Form

A 5-star rating system for forms.

Ways to Use QR Codes

For personal use, QR codes can be read by modern mobile phones and other multimedia devices.

How Can We Help You? balloons
How Can We Help You?
bullet Custom Programming
bullet Ready-Made Software
bullet Technical Support
bullet Possibilities Newsletter
bullet Website "How-To" Info
bullet Useful Information List

© 1998-2001 William and Mari Bontrager
© 2001-2011 Bontrager Connection, LLC
© 2011-2024 Will Bontrager Software LLC