Internet appears everywhere in our life. Form as a data gathering component is the must have component in a web app. When the page is submitting data to the server, if it takes a relative long time for the backend server to process the data, then the client users will feel lost while waiting for this if he cannot get any indication about what's happening. They may even reclick the button which will cause the data resubmission. This affects the user experience and also the system performance and stability.
The solution to the above issue is we usually will disable the submit button or hide the submit button and show some indication message after the user submits the form. This will protect the user from resubmitting the form and it increases the user experience as well.
Disable submit button and show spin icon
A form can be used to implement various kinds of data gathering process such as user registration, query search and publish Twitter etc. Here we create a simple HTML page which will realize the query search function. Users need to enter the keyword to be searched and then click the Search button to submit the form. Then the button will be hidden and at the same time a spinning icon will show up to tell the user the operation is in progress. The code is shown below:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en-US" xml:lang="en-US" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/>
<title>Search Test</title>
<style type="text/css">
body{margin:0;padding:0;}
.content{margin:0 auto;width:350px;font:13px/27px Arial,sans-serif;}
.content input, .content img{vertical-align:middle;margin-left:3px;}
.content .input_text{border:1px solid #ccc;height:18px;}
.content #submit_btn{height:24px;}
</style>
<script type="text/javascript">
function getId(id) {
return document.getElementById(id);
}
function validation() {
getId("submit_btn").style.display="none";
getId("wait_tip").style.display="";
return true;
}
</script>
</head>
<body>
<div class="content">
<form action="http://loading.ibm.com/" enctype="multipart/form-data" method="get"
onsubmit="return validation();">
<label>Keyword:</label>
<input name="q" class="input_text" type="text" value=""/>
<input value="Search" id="submit_btn" type="submit" />
<span id="wait_tip" style="display:none;"><img src="images/loading.gif"
id="loading_img"/> Please wait...</span>
</form>
</div>
</body>
</html>
The page will look like:
After the form submitted
If we open this file in IE browser, after we type the keyword and submit the form, the GIF icon will show up , but it will not be spinning, the same GIF icon will be spinning in Firefox or Chrome.
How to solve this issue?
We modify the code above, we first just hide the submit button and show the GIF icon after user clicks Search button and don't redirect the page. After the modification, the GIF image can spin normally now. This means the issue is due to the page redirection. So what we need to do is to set the img's src attribute again after user clicks the Search button, this will activate the GIF image.
function validation() {
getId("submit_btn").style.display="none";
getId("wait_tip").style.display="";
setTimeout(function(){getId("loading_img").src=getId("loading_img").src},\
10);
return true;
}
Solve the issue where the spinning icon still shows after Back button clicked in Firefox
After the result page shows, the user may click the Back button on the browser to return back to the search page. The effect now will be the spinning icon will still show up and the Search button will be replace by the spinning GIF icon. What happened? The issue related to the code we modifed in step 2. After add the setTimeout() step, this issue will appear. So what we do is to add a condition to check the browser type, if it's IE, we will add the setTimeout() function, otherwise, we will do nothing.
function validation() {
getId("submit_btn").style.display="none";
getId("wait_tip").style.display="";
if(navigator.userAgent.indexOf("MSIE")>0){
setTimeout(function(){getId("loading_img").src=getId("loading_img").src}, \
10);
}
else{
getId("loading_img").src="images/loading.gif";
}
return true;
}
}
Reference : http://www.ibm.com/developerworks/cn/web/1305_liangyue_webgif/index.html?ca=drs-
Great, works fina, Thanks