Facebook Twitter Instagram
    TecAdmin
    • Home
    • Ubuntu 20.04
      • Upgrade Ubuntu
      • Install Java
      • Install Node.js
      • Install Docker
      • Install LAMP Stack
    • Tutorials
      • AWS
      • Shell Scripting
      • Docker
      • Git
      • MongoDB
    • FeedBack
    • Submit Article
    • About Us
    Facebook Twitter Instagram
    TecAdmin
    Home»Programming»JavaScript»How to Call JavaScript Function on Click Events

    How to Call JavaScript Function on Click Events

    RahulBy RahulOctober 20, 20152 Mins ReadUpdated:May 6, 2020

    JavaScript is one of the core programming language used on the websites. JavaScript enables interactive web pages and is an essential part of web applications. Most of the modern websites relies on JavaScript to handle client side application behavior. All the web browsers have a dedicated JavaScript engine to execute it.

    In this tutorial you will learn, how to call a JavaScript function on various page events like: On click , on form submission, or other various HTML controls.

    Create JavaScript Function

    First of all, create a JavaScript function to use further in this tutorial. Add this JavaScript code between… tag of the web page. You may also create function under separate JavaScript file and include in HTML page.

    1
    2
    3
    4
    5
    6
    <script type="text/javascript">
      function myFunction() {
    var dt = new Date();
    alert(dt);
    }
    </script>

    The above function will print current datetime in a popup. Let’s call this function on click events of various HTML controls. These HTML controls needs to put under tag of web page.

    1. Call JavaScript on Hyperlink 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.

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

    Call js function on link click

    2. Call JavaScript on Form Submit

    Next, create a sample form to call JavaScript function of form submit event. This is useful for validating form input values and then submit.

    1
    2
    3
    4
    <form id="myForm" method="post">
         Name:    <input name="name" id="name" type="text" /><br />
        <input type="button" id="form1" onclick="myFunction();" value="Submit" />
    </form>

    Call JavaScript function on Form Submit

    3. Call JavaScript on Button Click

    Now call JavaScript function of button click event. Add the below code between the body tag of html page. This can be help ful to check form value or verify form values.

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

    Call JavaScript function on Button Click

    4. Call JavaScript on Link with P Tag

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

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

    Call JavaScript function on Link with P Tag

    function html javascript js
    Share. Facebook Twitter Pinterest LinkedIn Tumblr Email WhatsApp
    Previous ArticleHow to Install MySQL 5.7 on Ubuntu 16.04 LTS
    Next Article How to Setup Network Interface on Ubuntu, Debian & LinuxMint

    Related Posts

    How to Replace String in JavaScript

    Updated:June 13, 20222 Mins Read

    JavaScript Program to Add Two Numbers

    Updated:June 9, 20222 Mins Read

    How to Install ReactJS on Ubuntu 20.04

    3 Mins Read

    Remove First Character from String in JavaScript

    1 Min Read

    10 Useful JavaScript Console Methods

    Updated:June 9, 20223 Mins Read

    JavaScript Program to Remove Duplicate Array Elements

    Updated:July 20, 20211 Min Read

    1 Comment

    1. Idalia Galey on May 6, 2020 4:29 am

      Bookmarked!, I really like it!

      Reply

    Leave A Reply Cancel Reply

    Recent Posts
    • What is CPU? – Definition, Types and Parts
    • What is the /etc/aliases file
    • What is the /etc/nsswitch.conf file in Linux
    • How to Install Ionic Framework on Ubuntu 22.04
    • What is the /etc/hosts file in Linux
    Facebook Twitter Instagram Pinterest
    © 2022 Tecadmin.net. All Rights Reserved | Terms  | Privacy Policy

    Type above and press Enter to search. Press Esc to cancel.