Here i will show you how to chain multiple javascript functions (chained functions). This is not as simple as it seems because the functions can be dependant on the previous, they can run out of order or they can run independantly.

There are 3 ways of chaining functions (excluding operators).

1. stacked  functions in a function
   

   function combinedFunction {
   
   	runFunction1 ();
   	runFunction1 ();
   	runFunction1 ();
   
   }

   You can use operators here but the main purpose of this method is to allow you to declare only 1 script in your HTML and arrange the functions you want running neatly.

2. Basic chain - in a submit button
   

   <form method="post" id="contact_form" onsubmit="runFunction1(); runFunction2(); runFunction3();">

   See notes on operators. it is particularly important when using a submit button

3. Function in function, chain
   

   function runFunction1  {
   
   	// Do some stuff
   	
   	runFunction2();
   
   	}

   you can keep expanding the number of functions you have and also can apply logic to them

Operators - Submit button

This section will focus on the different outcomes of using operators for the submit button with functions. It must be noted that most of these rules will apply to other Javascript circumstances.

• ||  or
• & and with no dependancy
• && and but previous function must return true (or not false>)
• !! (runFunction1() && runFunction2())   - check this, it should return a boolean based on all results
• to prevent the submit button functioning, you must add return false; . Iit must be at the end and seperate
• if you use && the function to the left must run true otherwise the next will not run
• & means 'and' but does not require the prior function to be run successfully, might be the same as function bob(); function builder();
• if a function returns false, the submit button will not work. This might be overidden in a non successive chain when one of the subsequent functions returns true
• you can return false / true / return variable / text / nothing (not recommended and depends on your code
• onClick and onSubmit are different. onSubmit can be fired by clicking or by pressing enter.

Examples

Example 1

<form method="post" id="contact_form" onsubmit="runFunction1(); runFunction2(); runFunction3();">

• the functions are seperated by a semi-colon.
• All of these functions will be run, from left to right
• and none of them will be depandant on the other to run or return true.
• the submit button will activate

Example 2

<form method="post" id="contact_form" onsubmit="return myFunction();">

• if myFunction returns false, the submit button will not activate (check this)
• if the myFunction  returns true, the submit button will activate

Example 3

<form method="post" id="contact_form" onsubmit="return validator1() && validator2()">

•  the function validator2() will not run unless validator1() returns true
• if validator2() returns false, the submit button will not activate (i need to check this)

Example 4

<form method="post" id="contact_form" onsubmit="validateCaptchaCode() && postForm(); return false;">

• postFrom() will not run unless validateCaptchaCode() returns true
• the submit button will not activate because of return false;  , irrespective of the return value of postForm()

How to prevent buttons from submitting forms

• Add type="button" so the return from Javascript works.
• Adding return false; adds an extra method, it prevents default action if there is an exception in your Javascript code. This is toptional.
• javascript - How to prevent buttons from submitting forms - Stack Overflow
  
  • Q:
    • In the following page, with Firefox the remove button submits the form, but the add button does not.
    • How do I prevent the remove button from submitting the form?
  • A:
    • You're using an HTML5 button element. Remember the reason is this button has a default behaviour of submit, as stated in the W3 specification as seen here: W3C HTML5 Button
    • So you need to specify its type explicitly:

      <button type="button">Button</button>

•  html - Keep button from submitting form Javascript - Stack Overflow
• How to Prevent Buttons from Submitting Forms in HTML? - GeeksforGeeks - We will use different approaches for preventing buttons from submitting forms. Disable the submit button and Using the onsubmit Method.