How to add loading image to JavaScript code

Question

I am new in JavaScript, ِ All I need is to add a loading image (gif) to the following script when the form is submitted without errors.

I use the code with a script available on internet (Facebook-like Registration Form with jQuery).

Any help please?

$(document).ready(function () {
    $('#regForm').submit(function (e) {
        register();
        e.preventDefault();
    });
});

function register() {
    hideshow('loading', 1);
    error(0);
    $.ajax({
        type: "POST",
        url: "submit.php",
        data: $('#regForm').serialize(),
        dataType: "json",
        success: function (msg) {
            if (parseInt(msg.status) == 1) {
                window.location = msg.txt;
            } else if (parseInt(msg.status) == 0) {
                error(1, msg.txt);
            }
            hideshow('loading', 0);
        }
    });
}

function hideshow(el, act) {
    if (act) $('#' + el).css('visibility', 'visible');
    else $('#' + el).css('visibility', 'hidden');
}

function error(act, txt) {
    hideshow('error', act);
    if (txt) $('#error').html(txt);
}

Charlie Affumigato · Accepted Answer · 2013-11-23 02:07:57Z

1

you need 2 elements, something in your html like

<img src="loading.gif" id="loading" style="visibility:hidden">

(will show with hideshow('loading',1) and hide again when the server responds. Also another one

<img src="error.gif" id="error" style="visibility:hidden">

for the error. Of course loading.gif and error.gif could be any valid image file.

answered Nov 23, 2013 at 2:07

Charlie Affumigato

1,0271 gold badge8 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to add loading image to JavaScript code

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related