时间戳

首页 > 解决方案 > 如何使用外部js文件在表单提交上调用函数

javascript - 如何使用外部js文件在表单提交上调用函数

问题描述

我想在用户提交表单时调用一个函数，以及如何使用外部JS脚本来实现。

索引.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");
    }

标签： javascripthtmlcss

解决方案

您可以添加 表单event listener事件onsubmit，也可以使用script标签添加外部脚本。

示例：如何添加外部 JS 文件。

<!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>

工作示例：

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>

您可以formSubmitHandler在main.js文件中添加。

推荐阅读