jquery - call function from js file in html file -


i have 1 html file. in file on click of button want call function in js file. how that?

here 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 jquery</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>jquery mobile: demos , 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> 

html file in www/ui folder. there below js file name main.js in www/js folder. contains handlelogin function.

function handlelogin() { } 

how call function html file. because when click on login button same page called. appreciated. in advance.

the same page called because it's submitting form. need cancel behaviour.

function handlelogin(evt) { evt.preventdefault(); //do stuff here... } 

note evt argument. automatically forwarded event callback - event object, contains data fired event, , must referenced in order cancel form's default action.

however better bind form's submit event rather directly button, in case user submits form via enter key. this, change jquery to

$('#loginform').on('submit', handlelogin); 

Comments

Popular posts from this blog

javascript - backbone.js Collection.add() doesn't `construct` (`initialize`) an object -

php - Get uncommon values from two or more arrays -

Adding duplicate array rows in Php -