在条件内调用JQuery函数

Question

I'm new to JS and JQuery and I'm trying implement the following functionality.

I have a form which has multiple inputs, each having its individual validation. These validations have been implemented inside one function.

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;
}

This validation function is executed when a user clicks on the following button:

<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>

Now I'm trying to implement Bootstap's 'loading state button' in this. The functionality would work like this:

When a user clicks on the button, the front-end validation function is called. Once the validation function (checkUpload()) returns true, the following JQuery function should be called.

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

The trick is that the button loading function has to be called only after the checkUpload function returns true. How do I implement this?

Answer 1

use below code. Use function inside condition .if function returns true then it execute code in side if condition

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

Answer 2

First remove the onclick attribute from the button:

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

Then define your functions and set .on('click') event handler:

$(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);

});

Now, clicking the button will go to handleSubmit function, which employs your code.