JavaScript onclick event submit form 用法範例

本篇介紹如何在 JavaScript onclick event 事件中用 form.submit() 函式來 submit form 送出表單。

HTML 基本的 submit form 用法

HTML 基本的 submit form 寫法如下，有個 form 標籤，裡面有個 input 標籤 type="submit"，

submit-form.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<html>
<head>
<title>Form Submit Example</title>
<!-- Include CSS File Here
<link rel="stylesheet" href="css/xxx.css"/>
-->
<!-- Include JS File Here
<script src="js/xxx.js"></script>
-->
</head>
<body>
<div class="container">
<div class="main">
<h2>Form Submit Example</h2>
<form action="#" method="post" name="form_name" id="form_id" class="form_class" >
    <label>Name :</label><input type="text" name="name" id="name" placeholder="Name" />
    <label>Email :</label><input type="text" name="email" id="email" placeholder="Valid Email" />
    <input type="submit" name="submit_id" id="btn_id" value="Submit"/>
</form>
</div>
</div>
</body>
</html>

JavaScript onclick event submit form 用法

跟上範例不一樣的是，這次我們要把 input 標籤 type="submit" 改成 input 標籤 type="button"，然後再加上 onclick="submit_func()" 指定某函式來處理 onclick 按鈕點擊事件。

如下範例介紹了 4 種 方式，分別為 submit_by_id、submit_by_name、submit_by_class、submit_by_tag 來送出表單，

submit-form2.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
<html>
<head>
<title>Javascript Form Submit Example</title>
<!-- Include CSS File Here
<link rel="stylesheet" href="css/xxx.css"/>
-->
<!-- Include JS File Here
<script src="js/xxx.js"></script>
-->
<script>
function submit_by_id() {
    var name = document.getElementById("name").value;
    var email = document.getElementById("email").value;
    if (validation()) {
        // Submit form with id function.
        document.getElementById("form_id").submit(); // form submission
        alert("Name : " + name + " \n" +
            "Email : " + email + " \n" +
            "Form Id : " + document.getElementById("form_id").getAttribute("id") + "\n\n" +
            "Form Submitted Successfully");
    }
}

function submit_by_name() {
    var name = document.getElementById("name").value;
    var email = document.getElementById("email").value;
    if (validation()) {
        // Submit form with name function.
        var x = document.getElementsByName('form_name');
        x[0].submit(); // form submission
        alert(" Name : " + name + " \n" +
            "Email : " + email + " \n" +
            "Form Name : " + document.getElementById("form_id").getAttribute("name") + "\n\n" +
            "Form Submitted Successfully");
    }
}

function submit_by_class() {
    var name = document.getElementById("name").value;
    var email = document.getElementById("email").value;
    if (validation()) {
        // Submit form with class function.
        var x = document.getElementsByClassName("form_class");
        x[0].submit(); // form submission
        alert("Name : " + name + " \n" +
            "Email : " + email + " \n" +
            "Form Class : " + document.getElementById("form_id").getAttribute("class") + "\n\n" +
            "Form Submitted Successfully");
    }
}

function submit_by_tag() {
    var name = document.getElementById("name").value;
    var email = document.getElementById("email").value;
    if (validation()) {
        // Submit form with HTML <form> tag function.
        var x = document.getElementsByTagName("form");
        x[0].submit(); // form submission
        alert("Name : " + name + " \n" +
            "Email : " + email + " \n" +
            "Form Tag : <form>\n\n" +
            "Form Submitted Successfully");
    }
}

function validation() {
    var name = document.getElementById("name").value;
    var email = document.getElementById("email").value;
    if (name === "" || email === "") {
        alert("Please fill all fields...!!!!!!");
        return false;
    } else {
        return true;
    }
}
</script>
</head>
<body>
<div class="container">
<div class="main">
<h2>Javascript Form Submit Example</h2>
<form action="#" method="post" name="form_name" id="form_id" class="form_class" >
    <label>Name :</label><input type="text" name="name" id="name" placeholder="Name" />
    <label>Email :</label><input type="text" name="email" id="email" placeholder="Valid Email" />
    <input type="button" name="submit_id" id="btn_id" value="Submit by Id" onclick="submit_by_id()"/>
    <input type="button" name="submit_name" id="btn_name" value="Submit by Name" onclick="submit_by_name()"/>
    <input type="button" name="submit_class" id="btn_class" value="Submit by Class" onclick="submit_by_class()"/>
    <input type="button" name="submit_tag" id="btn_tag" value="Submit by Tag" onclick="submit_by_tag()"/>
</form>
</div>
</div>
</body>
</html>

JavaScript submit 有兩種寫法，第一種是這樣，

1
document.getElementById("form_id").submit();

第二種是這樣，

1
2
var x = document.getElementById('form_id');
x[0].submit();

以上就是 JavaScript onclick event submit form 用法範例介紹，
如果你覺得我的文章寫得不錯、對你有幫助的話記得 Facebook 按讚支持一下！

其他參考
Onclick JavaScript Form Submit
https://www.formget.com/javascript-submit-form/