call function from js file in html file

Question

I have one html file. In that file on click of button I want to call a function which is in a js file. How to do that?

Here is my html file as:

<!DOCTYPE html  PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
   <title>Scrollable HTML table plugin for jQuery</title>
    <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<title>jQuery Mobile: Demos and Documentation</title>


<link rel="stylesheet" href="../jquery.mobile/jquery.mobile-1.1.0.css" />
<link rel="stylesheet" href="../docs/assets/css/jqm-docs.css" />
<link rel="stylesheet" href="../docsdemos-style-override.css" />
<script type="text/javascript" charset="utf-8" src="../cordova-1.6.1.js"></script>
<script type="text/javascript" src="../jquery.mobile/jquery-1.7.2.min"></script>
<script type="text/javascript" charset="utf-8" src="../js/main.js"></script>
<script type="text/javascript" src="../jquery.mobile/jquery.mobile-1.1.0.js"></script>


</head>
<body  >

<!-- main login page -->
<div id="mypage" data-role="page" data-theme="a" data-ajax="false">


    <div data-role="header" align="center">
        <img border="0" src="../jquery.mobile/images/toplogo.png" />

    </div>


    <div data-role="content">

        <form id="loginForm" >
            <div data-role="fieldcontain" class="ui-field-contain ui-body ui-br" >
                <label for="username">Username:</label> <input type="text"
                    name="username" id="username" value="" /> <label for="password">Password:</label>
                <input type="password" name="password" id="password" value="" /> <label
                    for="dob">Date of birth:</label> <input type="password"
                    type="password" name="dob" id="dob" value="" />
            </div>
            <div class="ui-body ui-body-a" >
                <fieldset class="ui-grid-a" data-theme="a" >
                    <div class="ui-block-a" data-theme="a">
                        <input type="submit" data-role="button" value="Login"
                            id="submitButton">
                    </div>
                    <div class="ui-block-b" data-theme="a">
                        <input type="reset" data-role="button" value="Cancel"
                            id="cancelButton"> 
                    </div>

                </fieldset>
            </div>
        </form>

    </div>
</div>


<!-- main menu -->


<script>

    console.log("clickkkkkkkkkkkkkkkkkkkk");
    $("#loginForm").on("submit",handleLogin);


</script>

This html file is in www/UI folder. Now there is below js file name as main.js which is in www/js folder. which contains handleLogin function.

function handleLogin()
{

 }

How to call this function from my html file. Because when I click on login button same page is get called. Any help will be appreciated. Thanks in advance.

Mitya · Accepted Answer · 2012-07-07 10:40:57Z

1

The same page is called because it's submitting the form. You need to cancel this behaviour.

function handleLogin(evt) {
    evt.preventDefault();
    //do stuff here...
}

Note the evt argument. This is automatically forwarded to any event callback - it is the event object, which contains data about the fired event, and which must be referenced in order to cancel the form's default action.

However it would be better to bind to the form's submit event rather than directly to the button, in case the user submits the form via the enter key. To do this, change your jQuery to

$('#loginForm').on('submit', handleLogin);

edited Jul 7, 2012 at 10:40

answered Jul 7, 2012 at 10:35

Mitya

34.8k15 gold badges70 silver badges126 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

PPD Over a year ago

Hi Utkanos I had added evt in js file as you suggest above and call $('#loginForm').on('submit', handleLogin); from login.html still same page getting displayed. Thanks

Mitya Over a year ago

Provided you're sure your handleLogin function is getting called (check this) and there's no JS errors, this should not happen. If stil unsure, set up a JS Fiddle to show us.

Mitya Over a year ago

I did say check the console for errors. There are indeed errors. handleLogin is not accessible by your jQuery code. This is because that code is loading before the script that includes your function - therefore, when your jQ tries to bind to handleLogin, that function doesn't exist yet. Your jQ shouldn't be in your HTML, anyway - move it to the same file as your function.

PPD Over a year ago

@ Utkanos will you please show me Fiddle because after adding handleLogin in html also doesn't show me alert here

Mitya Over a year ago

OK, the plot thickens... it's failing because you're using jQuery's on method, but the version of jQuery you're using in the Fiddle is 1.5 (on() arrived in 1.6). Change to a higher version of jQuery and your latest Fiddle is fine. You stil shouldn't have your JS in your HTML, though, and you still shouldn't have opening braces ({) on different lines. After all this, you might wish to up-vote my answer :)

Ram · Accepted Answer · 2012-07-07 10:33:51Z

0

the code should work if the main.js is loaded correctly, what you want is event.preventDefault() as on the submit event browser submits the form and the handleLogin function is not executed.

If this method is called, the default action of the event will not be triggered.

$("#loginForm").on("submit",function(e){
   e.preventDefault();
   handleLogin()
});

answered Jul 7, 2012 at 10:33

Ram

145k16 gold badges174 silver badges201 bronze badges

1 Comment

PPD Over a year ago

@ undefined after replacing old code with your once still same page gets called. And If I print using console.log() before e.preventDefault() statement then also statement is not printed. Means control is not going inside that block.

Collectives™ on Stack Overflow

call function from js file in html file

2 Answers 2

5 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related