JavaScript 如何通过点击链接提交表单

在本文中，我们使用JavaScript通过点击链接来提交表单。在body标签中，创建了一个HTML表单，并指定了表单的id、method和action。在表单中，使用一个带有onclick事件的锚点标签。创建一个JavaScript函数，在点击链接时执行。当我们点击链接时，函数submitForm()将被执行。这个函数将使用DOM的getElementById()方法来获取元素对象，通过传递表单id给这个方法，然后使用submit()方法提交表单。

示例： 创建一个表单并使用上述方法提交。这需要一个表单结构，用户将在其中提供他/她的详细信息。

HTML

<!DOCTYPE html>
<html>
 
<body>
    <h2 style="color:green">GeeksforGeeks</h2>
    <b>Submit form details</b>
 
    <form id="form__submit" action="form.php" method="post">
        <label>NAME: </label><br />
        <input type="text" name="name" /><br />
        <label>AGE: </label><br />
        <input type="number" name="age" /><br />
        <label>CITY: </label><br />
        <input type="text" name="city" /><br /><br />
        <a href="#" onclick="submitForm()">Submit Here</a>
    </form>
 
    <script>
        function submitForm() {
            let form = document.getElementById("form__submit");
            form.submit();
        }
    </script>
</body>
 
</html>

注意： 给定的HTML代码将会将表单数据重定向至在 action 属性中提及的网站或文件。

PHP代码： 创建一个PHP文件来获取用户输入的表单数据，将此PHP文件重命名为“form.php”。此代码用于显示用户表单数据。

PHP

<?php
     $name=$ _POST['name'];
     $age=$ _POST['age'];
     $city=$ _POST['city'];
 
    echo "NAME-SUBMITTED :  $name <br>"; echo "AGE-SUBMITTED :$ age <br>";
 
    echo "CITY-SUBMITTED:  $city";
?>

输出：

JavaScript 如何通过点击链接提交表单