CODEWITHSUNDEEP
javascriptjquery
DevManX
DevManX

Reputation: 486

How to add loading image to JavaScript code

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

Upvotes: 0

Views: 578

Answers (1)

Charlie Affumigato
Charlie Affumigato

Reputation: 1027

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.

Upvotes: 1

Related Questions