html按钮调用javascipt提交表单

在HTML中，你可以通过创建一个按钮（通常是<button>或<input type="button">）

并为其添加onclick事件处理器

来调用JavaScript函数以提交表单。下面是如何实现这一功能的步骤：

方法1：使用<button>元素
‌创建表单‌：首先，你需要有一个表单（<form>），其中包含你想要提交的数据。

‌添加按钮‌：在表单内或外部添加一个按钮，并为它设置onclick事件处理器，调用一个JavaScript函数。

‌编写JavaScript函数‌：编写一个JavaScript函数来处理表单的提交。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Form Submission Example</title>
<script>
function submitForm() {
    // 获取表单元素
    var form = document.getElementById('myForm');
    // 提交表单
    form.submit();
}
</script>
</head>
<body>

<form id="myForm" action="/submit-form" method="post">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name"><br><br>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email"><br><br>
    <!-- 添加按钮并调用JavaScript函数 -->
    <button type="button" onclick="submitForm()">Submit</button>
</form>

</body>
</html>

 

方法2：使用<input type="button">元素
‌创建表单‌：与上述相同，首先有一个表单。

‌添加按钮‌：在表单内或外部添加一个<input type="button">元素，并为它设置onclick事件处理器。

‌编写JavaScript函数‌：与上述相同，编写一个JavaScript函数来处理表单的提交。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Form Submission Example</title>
<script>
function submitForm() {
    var form = document.getElementById('myForm');
    form.submit();
}
</script>
</head>
<body>

<form id="myForm" action="/submit-form" method="post">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name"><br><br>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email"><br><br>
    <!-- 添加按钮并调用JavaScript函数 -->
    <input type="button" value="Submit" onclick="submitForm()">
</form>
</body>
</html>

方法3：使用纯JavaScript提交表单（不使用按钮的onclick属性）
‌创建表单‌：同上。

‌添加按钮‌：创建一个按钮，但这次我们不使用onclick属性。我们将使用JavaScript来监听按钮的点击事件。

‌编写JavaScript代码‌：使用addEventListener来监听按钮的点击事件，并调用提交表单的函数。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Form Submission Example</title>
<script>
window.onload = function() { // 确保DOM加载完成后再绑定事件处理器
    var submitButton = document.getElementById('submitButton'); // 获取按钮元素
    submitButton.addEventListener('click', function() { // 添加点击事件监听器
        var form = document.getElementById('myForm'); // 获取表单元素
        form.submit(); // 提交表单
    });
};
</script>
</head>
<body>
<form id="myForm" action="/submit-form" method="post">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name"><br><br>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email"><br><br>
    <!-- 添加按钮 -->
    <button type="button" id="submitButton">Submit</button> <!-- 注意这里没有onclick属性 -->
</form>

最原始经典的模式, submit提交按钮方式
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <form method="post" action="99.ashx">
        <input type="text" name="txtName" />
        <input type="submit" value="经典提交" />
    </form>
</body>
</html>
posted @ 2026-08-08 17:29  techNote  阅读(5)  评论(0)    收藏  举报