CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Carla Dessi
Carla Dessi

Reputation: 9666

dynamically showing and hiding divs with javascript

I currently have the following code for my login system:

function handleLogin() {
    var e = $("#username").val();
    var p = $("#password").val();

    if(e != "" && p != "") {
        $.ajax({ 
            type: 'POST', 
            url: 'http://localhost/php/log.php', 
            crossDomain: true,
            data:  {username: e, password :p},
            dataType: 'json', 
            async: false,
            success: function (response) { 
                if (response.success) { 
                    alert("Your login worked");
                    $('#loginTest').html(e);
                } else {
                    alert("Your login failed");
                }
            },
            error: function(error) {
                alert('Could not connect to the database' + error);
            }
        }); 
    } else {
        alert("You must enter username and password");
    }
    return false;
}

When the login has worked, I get the correct alert, but then I want the login div to hide, and the div beneath it to show with the username (e) in it.

So basically I just need to work out how to hide the current div, then show another one.

The login div is called #loginPage and the div below it is called #loginTest

Upvotes: 0

Views: 1056

Answers (2)

Geeky Ninja
Geeky Ninja

Reputation: 6050

To show and hide any particular HTML element you can use show() and hide() functions of that element. Initially you can hide your loginTest div and only show loginPage div.

Try this:

function (response) { 
                if (response.success) { 
                    $(#loginPage).hide(); //Hiding login page div
                    $(#loginTest).show(); //Showing login test div
                    alert("Your login worked");
                    $('#loginTest').html(e);
                } else {
                    alert("Your login failed");
                }

You can also add time for showing and hiding your DIV. Like $(#loginPage).hide("fast"); and $(#loginTest).show("slow");. It totally depends upon you what is your need.

Upvotes: 0

Rory McCrossan
Rory McCrossan

Reputation: 337560

You can use hide() and show():

if (response.success) { 
    $('#loginPage').hide();
    $('#loginTest').show().html(e);
}

There are also fadeIn, fadeOut, slideUp, slideDown to deal with the display/hiding of elements. You could even use animate to define your own transition. The API is always your friend in these situations.

Upvotes: 2

Related Questions