20 October 2015

How to Call JavaScript Function on Click Events

Written by Rahul K. | October 20, 2015

General Articles function, html, javascript, js

This tutorial will help you to how to call a JavaScript function on click or submit events of various html controls.

Create JavaScript Function –

First, Create a JavaScript function like below and add this between <head>…</head> tag of your web page. You may also add function under separate JavaScript file and include in html page.

&lt;script type=&quot;text/javascript&quot;&gt;
function myFunction() {
	var dt = new Date();
	alert(dt);
}
&lt;/script&gt;

function myFunction() {

var dt = new Date();

alert(dt);

}

</script>

Now, Call above JavaScript function on Click events of various html controls. These HTML controls needs to put under <body> tag of web page.

1. On Hyper link Click

Add below HREF html code in body section and access on web browser. Now just click link, It will execute JavaScript’s myFunction which will show current date as per used above.

&lt;a href=&quot;javascript:void(0);&quot; onclick=&quot;myFunction();&quot;&gt; click here &lt;/a&gt;

1	<a href="javascript:void(0);" onclick="myFunction();"> click here </a>

2. On Form Submit

Now call JavaScript function of form submit event. This is useful for validating form input values and then submit them.

&lt;form id=&quot;myForm&quot; method=&quot;post&quot;&gt;
     Name:    &lt;input name=&quot;name&quot; id=&quot;name&quot; type=&quot;text&quot; /&gt;&lt;br /&gt;
    &lt;input type=&quot;button&quot; id=&quot;form1&quot; onclick=&quot;myFunction();&quot; value=&quot;Submit&quot; /&gt;
&lt;/form&gt;

Name: <input name="name" id="name" type="text" /><br />

</form>

3. On Button Click

Now call JavaScript function of button click event.

&lt;button onclick=&quot;myFunction();&quot;&gt;click here &lt;/button&gt;

1	<button onclick="myFunction();">click here </button>

4. On Link with P Tag

Now call JavaScript function link created using html “p” tag.

&lt;p id=&quot;demo&quot; onclick=&quot;myFunction()&quot;&gt;click here &lt;/p&gt;

1	<p id="demo" onclick="myFunction()">click here </p>

Create JavaScript Function –

1. On Hyper link Click

2. On Form Submit

3. On Button Click

4. On Link with P Tag

Rahul K.

Related Posts

Leave a Reply