Question

我是JS和JQuery的新手，我尝试实现以下功能。

我有一个包含多个输入的表单，每个输入都有各自的验证。这些验证已在一个函数中实现。

function checkUpload() {
    var flagu1=0;
    var bookname = document.getElementById("title").value;

    var flagu2=0;
    .....
    .....
    var flagu6=0;

    if( flagu1==0 && flagu2==0 && flagu3==0 && flagu4==0 && flagu6==0 )
        return true;
    else 
        return false;
}

当用户点击以下按钮时执行此验证功能：

<button class="btn btn-secondaryup" name="submit" value="Upload" id="submitmeup" data-loading-text="UPLOADING..." onclick="clearBox('uploaderror')" type="submit" style="width:100%">UPLOAD</button>

现在我正在尝试实施Bootstap＆＃39;加载状态按钮＆＃39;在这。功能可以这样工作：

当用户点击按钮时，将调用前端验证功能。验证函数（checkUpload（））返回true后，应调用以下JQuery函数。

<script>
       $('#submitmeup').click(function() {
       var $btn = $(this);
       $btn.button('loading');
       setTimeout(function () {
       $btn.button('reset');
       }, 5000);
       });
</script>

诀窍是只有在checkUpload函数返回true后才能调用按钮加载函数。我该如何实现呢？

Answer 1

使用下面的代码。在函数内部使用函数。如果函数返回true，则在条件

的情况下执行side中的代码

 <script>
   $('#submitmeup').click(function() {
     var $btn = $(this);
     if(checkUpload()){
         $btn.button('loading');
         setTimeout(function () {
           $btn.button('reset');
         }, 5000);
       }
   });
</script>

Answer 2

首先从按钮中删除onclick属性：

<button class="btn btn-secondaryup" name="submit" value="Upload" id="submitmeup" data-loading-text="UPLOADING..." type="submit" style="width:100%">UPLOAD</button>

然后定义您的函数并设置.on('click')事件处理程序：

$(function() {

    var $submitButton = $('#submitmeup');

    // Submit handler
    function handleSubmit() {
        clearBox('uploaderror');

        var uploadValid = checkUpload();

        if (uploadValid) {
            // Upload successful
            showButtonLoading();
        }
    }

    function showButtonLoading() {
       $submitButton.button('loading');
       setTimeout(function () {
           $submitButton.button('reset');
       }, 5000);
    }

    function checkUpload() {
        var flagu1=0;
        var bookname = document.getElementById("title").value;

        var flagu2=0;
        .....
        .....
        var flagu6=0;

        if( flagu1==0 && flagu2==0 && flagu3==0 && flagu4==0 && flagu6==0 )
            return true;
        else 
            return false;
    }

    function clearBox(type) {
        // Your implementation here
    }

    // Event handler
    $submitButton.on('click', handleSubmit);

});

现在，点击该按钮将转到使用您的代码的handleSubmit功能。

在条件中调用JQuery函数

2 个答案: