如何使用外部js文件在表單提交上調用函數

Question

我想在用戶提交表單時調用一個函數，以及如何使用外部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>

主文件

    function a(){
        alert("verb");
    }

Answer 1

您可以在表單的onsubmit事件上添加event listener ，並且可以使用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文件。

Answer 2

按照這個代碼...

HTML文件

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

 function a() {
    
     alert('hello');
 }

如何使用外部js文件在表單提交上調用函數

問題描述

2 個解決方案

解決方案1
0 2020-03-14 15:25:12

解決方案2
0 2020-03-14 17:59:59

HTML文件

JS文件

如何使用外部js文件在表單提交上調用函數

問題描述

2 個解決方案

解決方案1 0 2020-03-14 15:25:12

解決方案2 0 2020-03-14 17:59:59

HTML文件

JS文件

解決方案1
0 2020-03-14 15:25:12

解決方案2
0 2020-03-14 17:59:59