jQuery slide up/down effect not working on div

Question

Developing ASP.NET Web Forms application using VS 2010 & have a login textbox and password textbox on a page.

Above those I have a simple div tag which will contain the error message if the login textbox or password textbox is empty.

JSFIDDLE

<div id="ErrorDiv"></div>

I wanted this div to slide down showing error message if either text box are empty

Following is jQuery code I have tried:

<script>
$(function () {

    $("#btnLogin").click(function () {    
        var error = 0;

        if (error == 0) {
            $("#ErrorDiv").slideToggle();
        }

        if ($("#txtLoginID").val() == "") {   
            error = 1;
            $("#ErrorDiv").text("Please Enter LoginID");
        }

        if ($("#txtPassword").val() == "") {
            error = 1;
            $("#ErrorDiv").text("Please Enter Password");
        }

        if (error == 1) {
            alert(document.getElementById("ErrorDiv").value());        
            $("#ErrorDiv").show(); 
        }

        else {
            alert(document.getElementById("ErrorDiv").value());
            $("#ErrorDiv").slideUP();
        }  
    });   
});
</script>

This does not work.

I also tried replacing $("#ErrorDiv").text("Please Enter LoginID"); with $("#ErrorDiv").html("Please Enter LoginID"); but that had no effect.

What can be the problem?

Answer 1

First of all this line won't work

$("#ErrorDiv").slideUP();

it should be

$("#ErrorDiv").slideUp(); //lower case p

Secondly your alert document.getElementById("ErrorDiv").value won't work as it's a div so it wont have a value. You could alert it's innerHTML document.getElementById("ErrorDiv").innerHTML or use jQuery $('#ErrorDiv').text()

I also don't see the point in your first if statement

if(error == 0)

As your setting the variable error to 0 everytime the button is clicked so this statement will always run. You may as well always slideToggle the div if this is what you wanted to do, like so

var error = 0;
$('#ErrorDiv').slideToggle();

I've update your fiddle here -> http://jsfiddle.net/d9Wwj/3/ I've changed some of your logic as well. You also weren't clearing your ErrorDiv when there were no more errors.

Below is the finished article

$((function(){
  $("#btnLogin").click(function (){
     var error = "";
     $('#ErrorDiv').slideToggle();

     if($("#txtLoginID").val() == ""){
         error += "Please Enter LoginID";
     }
     if($("#txtPassword").val() == ""){
        if(error){
           error += "<br />Please enter a password";   
        } else {
           error += "Please enter a Password";  
        }        
     }

     if(!error){
        $("#ErrorDiv").html("").slideUp();
     } else {
        $('#ErrorDiv').html(error).slideDown();
     }
  });
});

Answer 2

Try this

<div id="ErrorDiv" style="display:none;">Error</div>
<form>
    <input type="text" id="txtLoginID"/>
    <input type="password" id="txtPassword"/>
    <input type="submit" id="btnLogin"/>
</form>

Script:

$("#btnLogin").click(function() {
    var error = '';
    if (error == '') {
        $("#ErrorDiv").hide();
    }
    if ($("#txtLoginID").val() == "") {
        error = 'Please Enter LoginID \n';
    }
    if ($("#txtPassword").val() == "") {
        error += 'Please Enter Password'
    }
    if (error != '') {
        alert(error);
        $("#ErrorDiv").text(error).show();
    } else {
        $("#ErrorDiv").slideUP();
    }
    return false;
});

Fiddle