如何在提交表单后执行jQuery回调

如何在提交表单后执行jQuery回调

after-form-submit是在提交按钮被触发后执行的一组代码。通常情况下,一旦提交后,它被用来清除表单中的空白。例如,当登录凭证错误时,表单中的输入会变成空白。

方法:

1.首先,必须确保表格中的元素,如果它被加载。
2.然后,在提交方法中加入一个回调函数。
3.一旦提交按钮被点击,应该防止连续的回调。
4.紧接着,由于需要延迟,就会给出一个超时。如果没有延迟,后面应该发生的动作会在开始时就发生。比如在验证密码之前,输入表单不应该空白。
5.然后在最后给出需要执行的行动。

如何在Javascript中实现?

  1. 可以使用提交按钮对jQuery方法进行回调。
  2. 一旦表单的提交按钮被点击,回调函数就被触发。但是,在此之前,DOM(文档对象操作)必须被加载。一旦DOM被加载,它就会调用这些方法中的任何一个。( window.on(‘load’)或document.ready()或window.ready()都可以使用)。
  3. preventDefault()方法可以防止该方法多次启动。
  4. 我们使用setTimeout方法,在提交后用几毫秒的时间执行。

注意: window.ready()方法在所有资源加载完毕时被调用,document.ready()方法在DOM加载完毕时被调用。

示例:

<!DOCTYPE html>
<html>
  
<head>
    <title>
        How to perform jQuery Callback
        after submitting the form ?
    </title>
  
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
    </script>
  
    <script>
        (window).ready(function () {
  
            ("form").submit(function (e) {
                e.preventDefault();
                var name = ("#name").val();
                setTimeout(function () {
                    console.log("After timeout");
                    ('#name').val('');
                }, 100);
                alert(name + " has submitted");
            })
  
        })
    </script>
</head>
  
<body>
    <form action="">
        <input type="text" id="name">
        <input type="submit">
    </form>
</body>
  
</html>

输出:
如何在提交表单后执行jQuery回调?

这个表单提交方法触发了回调方法,起初它阻止了进一步的回调。然后在100毫秒的时间间隔后,警报方法被调用,并给出文本输入值。

Python教程

Java教程

Web教程

数据库教程

图形图像教程

大数据教程

开发工具教程

计算机教程