如何使用jQuery停止表单提交动作

给定一个表单，任务是用jQuery停止表单的提交动作。

方法1：使用jQuery中的on()和preventDefault( )方法。我们使用on()方法给表单附加一个submit事件，这意味着只要表单被提交，这个方法里面的脚本就会被执行。有一个参数e，代表事件参数或对象。我们使用preventDefault()方法来阻止表单的默认动作，也就是阻止表单的提交。

示例:

<!DOCTYPE html>
<html>
  
<head>
    <!-- jQuery -->
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
    </script>
      
    <style>
        body {
            text-align: center;
        }
  
        h1 {
            color: green;
            font-size: 2.5rem;
        }
  
        button {
            margin-top: 2rem;
            cursor: pointer;
        }
  
        form {
            width: 300px;
            margin: 0 auto;
        }
  
        input[type="submit"] {
            cursor: pointer;
        }
    </style>
</head>
  
<body>
    <h1>GeeksforGeeks</h1>
  
    <form>
        <fieldset>
            <legend>Details</legend>
            <label for="first_name">First name:</label>
            <input type="text" id="first-name" name="fname" />
            <br /><br />
            <label for="last_name">Last name:</label>
            <input type="text" id="last-name" name="lname" />
            <br /><br />
            <label for="gender">Gender : </label>
            <input type="radio" name="gender" /> Male
            <input type="radio" name="gender" /> Female <br /><br />
            <label for="email">Email:</label>
            <input type="email" id="email" name="email" />
            <br /><br />
            <input type="submit" value="Submit" class="submit-btn" />
        </fieldset>
    </form>
      
    <script type="text/javascript">
        $("form").on("submit", function (e) {
            e.preventDefault();
        });
    </script>
</body>
  
</html>

输出:

如何使用jQuery停止表单提交动作？

方法2：使用jQuery库中的submit()方法。我们也给表单附加一个提交事件，但在这里我们使用submit()方法而不是on()方法。在这个方法中，我们简单地返回false，这样表单的默认动作就不会被执行。

示例:

<!DOCTYPE html>
<html>
  
<head>
    <!-- jQuery -->
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
    </script>
      
    <style>
        body {
            text-align: center;
        }
  
        h1 {
            color: green;
            font-size: 2.5rem;
        }
  
        button {
            margin-top: 2rem;
            cursor: pointer;
        }
  
        form {
            width: 300px;
            margin: 0 auto;
        }
  
        input[type="submit"] {
            cursor: pointer;
        }
    </style>
</head>
  
<body>
    <h1>GeeksforGeeks</h1>
  
    <form>
        <fieldset>
            <legend>Details</legend>
            <label for="first_name">First name:</label>
            <input type="text" id="first-name" name="fname" />
            <br /><br />
            <label for="last_name">Last name:</label>
            <input type="text" id="last-name" name="lname" />
            <br /><br />
            <label for="gender">Gender : </label>
            <input type="radio" name="gender" /> Male
            <input type="radio" name="gender" /> Female <br /><br />
            <label for="email">Email:</label>
            <input type="email" id="email" name="email" />
            <br /><br />
            <input type="submit" value="Submit" class="submit-btn" />
        </fieldset>
    </form>
      
    <script type="text/javascript">
        $("form").submit(function (e) {
            return false;
        });
    </script>
</body>
  
</html>