javascript wait screen

hi_sanjeev
hi_sanjeev used Ask the Experts™
on
I wanted to show a wait screen, when user click on some link or subimt button in our application. For Example in Login screen when user enters username and password then clicks on Submit button, Say after hiting submit button the verification process may take few seconds, at that time i don't want to show the Login Screen, instead of that i wanted to show some decent wait screen, so user shouldn't hit the Submit button again. Please Help, Thanks !
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®

Commented:
try this,


splash.html
-------------------

<div id=loadingmsg style="position:absolute; z-index:2; left:300; top:150; width:200; height:100; border-width:4;
border-style:ridge; background-color:#eeeeee"><center><br><br><font face='Arial' Size=3><b>Validating,
Please Wait.....</b></font><br><br></center></div>
<html>
<head>
<script>
 function hidemsg(){
   if (document.all)
     document.all.loadingmsg.style.visibility='hidden';
   if (document.layers)
     document.loadingmsg.visibility='hidden';
   if (document.getElementById)
     document.getElementById('loadingmsg').style.visibility='hidden';
 }  
</script>
</head>
<body onload="setTimeout('hidemsg()',500);">
</body>
</html>

i would prefer this function to show on the target page. if the username and password is valid then just hide the splash message but if invalid then you have to redirect the user again to the login page. i guess this is what you want.

Author

Commented:
When user enters the username/password, the request goes to server and the response also comes from server. Until the response comes from server i don't know about the target page.So I wanted to show the wait screen in between request and response without time boundation( it may be 1 mili second to 2-3 seconds).
Hope this clarify the picture.

Author

Commented:
When user enters the username/password, the request goes to server and the response also comes from server. Until the response comes from server i don't know about the target page.So I wanted to show the wait screen in between request and response without time boundation( it may be 1 mili second to 2-3 seconds).
Hope this clarify the picture.
Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Author

Commented:
When user enters the username/password, the request goes to server and the response also comes from server. Until the response comes from server i don't know about the target page.So I wanted to show the wait screen in between request and response without time boundation( it may be 1 mili second to 2-3 seconds).
Hope this clarify the picture.
Commented:
the target page i am referring here is the page you have specified on the action attribute of the <form> tag. i.e.

<form name="frm" method="post" action="validate.asp">
......
......
</form>

in this case validate.asp is the target page. i will show you some sample codes which i've used in one of my test application using ASP.

validate.asp
-----------------------

<!--#include file="includes/login.inc"-->
<HTML>
<HEAD>
<TITLE>Validate User (<%=Date%>)</TITLE>
<LINK REL="stylesheet" HREF="includes/sheinvstyle.css" TITLE="Customized for all asp file" TYPE="text/css">
<SCRIPT>
  function setMessage(msg){
    document.all["msg"].innerText = msg;
    alert(msg);
  }
</SCRIPT>
</HEAD>
<BODY TOPMARGIN="0" LEFTMARGIN="0">
<TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0" WIDTH="100%" HEIGHT="100%">
  <TR><TD ALIGN="center" CLASS="tdcell9c">
    <DIV ID="msg">VALIDATING username and password. Please wait...</DIV>
  </TD></TR>
</TABLE>
<% Dim username, password, action, brancode, groupcode

     Sub Redir(actn,data1,data2)
       Response.Write "<FORM NAME='passes' METHOD='POST' ACTION='" & actn & "'><INPUT TYPE='hidden' NAME='brancode' VALUE='" & data1 & "'>"  & vbNewLine
       Response.Write "<INPUT TYPE='hidden' NAME='groupcode' VALUE='" & data2 & "'>"  & vbNewLine    
       Response.Write "</FORM><SCRIPT>document.passes.submit()</SCRIPT>"
     End Sub

     username = request("username")
     password = request("password")
     if isValidUser(username,password) then
       action = "main.asp" %>
<SCRIPT>
  setMessage('USER successfully validated. Press OK to continue....');
</SCRIPT>
<% else
       action = "login.asp" %>
<SCRIPT>
  setMessage('INVALID username and/or password. Press try again....');
</SCRIPT>
<% end if
     username  = Session("username")
     brancode  = Session("brancode")
     groupcode = Session("groupcode")
     redir action, brancode, groupcode %>
</BODY>
</HTML>

if you can see i have  a function named isValidUser(username,password) which takes two parameters (username and password). this returns true if both the username and password is correct otherwise false which then redirects the user to the login page. obviously isValidUser function can be found on my include file named login.inc.


login.asp
-----------------
<HTML>
<HEAD><TITLE>System Login</TITLE>
<LINK REL="stylesheet" HREF="includes/sheinvstyle.css" TITLE="" TYPE="text/css">
<SCRIPT>
function validate(obj){
  var blankCheck = /^ *$/;
  for(var i=0;i<obj.elements.length;i++){
    if(((obj.elements[i].type=="text")||(obj.elements[i].type=="password"))&&(blankCheck.test(obj.elements[i].value))){
      alert('Please enter a valid ' + obj.elements[i].name + '!');
      obj.elements[i].focus();
      return false;
    }    
  }
  return true;
}

function closeme(){  
  if(event.keyCode == 27){
      window.close();
  }
}
</SCRIPT>
</HEAD>
<BODY TOPMARGIN="0" LEFTMARGIN="0" ONLOAD="document.login.username.focus();">
<FORM NAME="login" METHOD="post" ACTION="validate.asp" ONSUBMIT="return validate(this);">
<TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0" WIDTH="100%" HEIGHT="100%">
  <TR><TD CLASS="cell9c">
    <TABLE BORDER="3" BORDERCOLOR="#CCCCCC" CELLPADDING="0" CELLSPACING="0">
    <TR><TD>
      <TABLE BORDER="0" CELLPADDING="4" CELLSPACING="0" WIDTH="350">
        <TR><TH COLSPAN="2" CLASS="head10l"><B>System Login</B></TH></TR>
        <TR><TH COLSPAN="2" CLASS="head8l">Please provide your username and password for verification</TH></TR>
        <TR><TD COLSPAN="2">&nbsp;</TD><TR>
        <TR>
          <TD CLASS="cell9r">Username :</TD>
          <TD CLASS="cell9l"><INPUT TYPE="text" NAME="username" MAXLENGTH="15" CLASS="text" ONFOCUS="this.focus();"></TD>
        </TR>
        <TR>
          <TD CLASS="cell9r">Password :</TD>
          <TD CLASS="cell9l"><INPUT TYPE="password" NAME="password" MAXLENGTH="15" CLASS="text" ONFOCUS="this.focus();"></TD>
        </TR>
        <TR><TD COLSPAN="2">&nbsp;</TD><TR>
        <TR>
          <TD>&nbsp;</TD>
          <TD CLASS="cell9l">
            <INPUT TYPE="submit" VALUE="Login">&nbsp;&nbsp;&nbsp;&nbsp;
            <INPUT TYPE="reset" VALUE="Clear">
          </TD>
        </TR>
      </TABLE>
    </TD></TR>
    </TABLE>
  </TD></TR>
</TABLE>
</FORM>
</BODY>
</HTML>
*******************************************************
******PLEASE DO NOT ACCEPT THIS COMMENT AS ANSWER******
*******************************************************
No comment has been added lately, so it's time to clean up this TA.
I will leave a recommendation in the Cleanup topic area that this question is:

 - [Points to third Grade A]

Please leave any comments here within the next seven days.
*******************************************************
******PLEASE DO NOT ACCEPT THIS COMMENT AS ANSWER******
*******************************************************

jAy
EE Cleanup Volunteer

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial