How to call a function on form submit using external js file
Question
I want to call a function when the user submit a form, and how to achieve this with external JS script.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>teste</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link type="text/javascript" src="main.js">
</head>
<body>
<h1 class="title">teste</h1>
<form action="a()">
<input type="input1" class="input1" name="verb" id="verb" placeholder="Verb"/>
</form>
</body>
</html>
main.js
function a(){
alert("verb");
}
2 answers
solution1
0 2020-03-14 15:25:12
You could add event listener on onsubmit event of form and you can add the external scripts by using script tag.
Example: how to add external JS file.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>teste</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="./main.js"></script>
</head>
<body>
//.. html
</body>
</html>
Working Example:
let formElem = document.getElementById("form"); formElem.addEventListener("submit", formSubmitHandler); function formSubmitHandler(event) { event.preventDefault(); console.log("Form submitted"); console.log("User entered: " + event.target.elements[0].value); }
<h1 class="title">teste</h1> <form id="form"> <input type="input1" class="input1" name="verb" id="verb" placeholder="Verb" /> <button type="submit" >Submit</button> </form>
You can add the formSubmitHandler in the main.js file.
solution2
0 2020-03-14 17:59:59
Follow This code...
HTML file
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>teste</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1 class="title">teste</h1>
<form >
<input type="text" name="text" id="input" placeholder="Verb" />
<input type="submit" onclick="a()">
</form>
<script src="./index.js"></script>
</body>
</html>
JS File
function a() {
alert('hello');
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
submit a form using external js
How do I call a function in an external js file using typescrpt
Using curl to load an HTML file that submit an external form with JS
how to call a function after iframe form submit using submit() jquery
How to call a JS function from rails form submit
Call JS Function with Form Submit Value
How to call a function in react js from an external JS File
how to call function in php file from the external js file
how can i call a php function using form submit
Can I call a php file on form submit, and call or echo a JS function from that?
Related Tags