Introduction: When submitting a form in a WEB application, for a good user experience or to prevent form recurrence, we usually start with the request and display a dynamic GIF icon to prompt the user for processing. This article will introduce in the traditional submission method, how skillfully use javacript way to solve the request launched when the dynamic hourglass icon in IE browser problem, and click the browser Back button after the request is completed, Firefox browser still shows the problem of the hourglass icon.
With all walks of life "by the Internet" phenomenon, the internet has become ubiquitous in our lives, as a form of data collection is one of the indispensable role. When the page submits data to the server, if the data in the background processing will take a certain amount of time to complete, then in the front-end page to stay in the time the user will be boring, meet the impatient users, and even avoid the submission button is its time and time to click, so that not only reduce the user's experience effect, More importantly, it affects the performance and stability of the system.
For the solution to the above problem, our usual practice is to disable the Submit button after the user first perform the normal commit operation, or to hide the submit button, and give a relatively friendly hint message. So that the ability to prevent form recurrence is achieved from the browser side, and the user experience is enhanced.
This article will detail how to achieve the above results through concrete examples, as well as some problems caused by different browser compatibility in the implementation process.
Disable the Submit button and use the hourglass icon to give a hint
A form can be applied to the program to achieve a variety of data collection functions, such as user login registration, conditional query, publishing micro-blog information, and its role is to let users with the server to do data interaction. Here we use the form to implement a simple query function. As shown in Listing 1, the user enters the keyword in the text box, clicks the "Query" button, submits the form, and the button is hidden, and a non-stop hourglass icon prompts the user to handle the operation. The code is as follows:
Listing 1
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en"
"Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
<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>
<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;" >Id= "loading_img"/> Please wait...</span>
</form>
</div>
</body>
We'll save the code in Listing 1 as. html format file, open using IE browser, enter the keyword after the form submission will find the GIF format of the hourglass icon can not be normal rotation (if submitted after the page jump too fast and too late to watch the effect, you can change the form of the action attribute value to a A slow web site, and the same operation is normal in Firefox and chrome.
Solve the problem that the hourglass icon can't play in IE browser
Due to the similarities and differences of Web page elements, we can not achieve the perfect performance in compatibility. Let's analyze the problem by modifying the code in Listing 1. Use JavaScript scripts to hide only the submit button and display an hourglass picture when submitting a form, but not to allow the browser to jump. Once the code has been modified and submitted again, we find that the hourglass image can be played normally in IE browser. From this we can draw the conclusion that the problem is related to the jump of the page. So we can try to use JavaScript script to give the IMG element's SRC attribute another value after the form triggers the commit event, reactivate the Gif hourglass icon, and we'll revise the validation () method in Listing 1, as shown in Listing 2:
Listing 2
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;
}
The code in Listing 2 replaces the validation () method in Listing 1, and we save it as an. html format file, then use IE or Firefox, Chrome Open, enter the keyword to query, click the "Query" button, and we find that the desired effect is perfect in different browsers. Run.
Solve the problem of clicking the Browser rewind button Firefox still shows the hourglass icon
After the form is submitted, the Query Results list page is displayed, in many cases the user will need to change the keyword query, although we can display a convenient query box on the results page, but still can not avoid users to click the browser's fallback button to complete the Requery operation.
Like the code in Listing 2, in the Firefox browser, from the query page to jump to the results page, click the Browser fallback button, we want to be back to the query page, the submit button is the normal display, but the fact is that the submission button was replaced by the hourglass picture, that is, can not be requery operation.
In order to find the problem, we can take the code of Listing 1 in Firefox to perform a fallback step to rule out whether it is because the code that is compatible with IE browser has corrupted the effect of Firefox.
When we finished executing the code in Listing 1, we found that the Submit button was displayed normally after clicking on the browser fallback, and that the code in Listing 2 was damaging to the Firefox effect, so we could modify the listing 2 code again using the way we judged the browser type. If it is IE browser, execute settimeout This statement, for other browsers are not executed. As shown in Listing 3:
Listing 3
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;
}
}
Create an hourglass icon online
It is definitely a good idea to give a status hint for the content of the site when it is loaded. When we need to use an hourglass (Loading State) icon that matches the style of the Web site, instead of finding a dedicated graphic designer, you can use the online hourglass icon generation tool, which not only provides a variety of styles, but also allows you to customize parameters such as size, color, and even playback speed. Here to provide you with three more excellent site:
Preloaders.net:Preloaders.net
Ajaxload.info:ajaxload.info
Loadinfo.net:loadinfo.net
