如何在加载页面和提交表单时调用函数

How to call function when load page and when submit form?

本文关键字：表单 提交 调用 函数 加载      更新时间：2023-09-26

加载页面和提交表单时如何调用函数？

当我加载页面时，我想调用函数function xxx()

当我提交表格时，我想再次致电function xxx()，我该怎么做？

NOTE: this example code call `function xxx()` when submit form only but not call `function xxx()` when load page

index.php.

<html>
    <head>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    </head>
    <body>
        <form method="post" id="f1">
            <input type="checkbox" id="one" name="number" value="one" onclick="xxx()">1<br>
            <input type="checkbox" id="two" name="number" value="two" onclick="xxx()">2<br>
            <input type="checkbox" id="three" name="number" value="three" onclick="xxx()">3<br>
        </form>
        <div id="overlay" style="position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; text-align: center; padding-top: 25%; cursor: wait; font-size: 24px;">
            LOADING
        </div>

<div id="result">
<script>
function xxx(){
    $('#result').hide();
    $('#overlay').show();
    $.ajax({
        url: 'test.php',
        type: 'POST',
        data: $('#f1').serialize(),
        success: function(data){
            $('#overlay').hide();
            $('#result').show();
            $('#result').html(data);
            }
        });
    return false;
}
</script>
    </body>
</html>

$(document).ready(function() {
    function xxx() {
        $('#result').hide();
        $('#overlay').show();
        $.ajax({
            url: 'test.php',
            type: 'POST',
            data: $('#f1').serialize(),
            success: function(data) {
                $('#overlay').hide();
                $('#result').show();
                $('#result').html(data);
            }
        });
        return false;
    }
    xxx(); // called when page is loaded.
    $("form#f1").submit(function(event) {
        xxx(); // call function when form is submitted.
        event.preventDefault();
    });
});

//when the page is loaded
$.ready(function(){
    // call of your function
    xxx();
    $('#f1').submit(function(){
        // new call of your function 
        xxx();
    });
});

这样做：

$(document).ready(function(){
    function xxx(){
        $('#result').hide();
        $('#overlay').show();
        $.ajax({
            url: 'test.php',
            type: 'POST',
            data: $('#f1').serialize(),
            success: function(data){
                $('#overlay').hide();
                $('#result').show();
                $('#result').html(data);
                }
            });
        return false;
    }
    xxx();
    $("form#f1").submit(function(e){
        e.preventDefault();
        xxx();
    });
});

或者，如果你不想阻止你的表格提交，请使用这个：

$(document).ready(function(){
    xxx();
    $("form#f1").submit(xxx);
});

您可以在中包装您的JavaScript

$(document).ready( function() {
   /* JS HERE */ 
});

这只适用于DOM就绪的情况。

我在HTML中看不到提交按钮，但您可以在该按钮上绑定一个点击事件，然后执行一个函数。

在页面加载时，只需在document.ready:上运行该方法

$(xxx);

对于表单提交，将其挂接到表单提交事件：

$("#f1").on("submit", xxx);

将本应运行的函数放在文档就绪函数中。

$(document).ready(function() {
    your code here
});

无论何时加载并准备好文档，这都将调用一个函数。

事实上，你的表格中没有提交按钮，你可以进行

$("#overlay").click(function() {
  your code here
});

每当单击id为#overlay的div时，这将运行函数内部的代码。

如果你想用jquery 加载

//Remember to use closure, always!!
(function ($) {
    $(document).ready( function () {
        function xxx () {
            //Do your magic
        }
        xxx();
        $('#your-form').submit(function (e) {
             xxx();
             //if you want to avoid the default submit
             e.preventDefault();
        });
    })
})(jQuery);
相关文章：