Archive for category Html
Check if field is displayed with JavaScript
When you have dynamic content on your webpage, it is sometimes useful to check if an HTML element is displayed on the screen.
For example, it could be handy to move the focus on a specific field after validation. But what if this field is actually hidden? Does your browser like to move the focus on an hidden field? Well, I can tell you that IE doesn’t like it very much! π
There are a lot of solutions on the web to check if a field is displayed or not. However, the solution I propose is probably the simplest:
function isDisplay(obj) { return obj.offsetTop > 0; }
Note that this code has been tested on Google Chrome 18.0, Firefox 3.6, Safari 5.1.5 and IE 7.
Prevent double-click on HTML form
How many users are still double-clicking when they visit a website? It is not really a problem with links, but it could be with buttons.
Let’s take, for example, a ‘contact us’ form and a submit button which will send the content of the form by email to the website administrator. What happens if a user double-click on the submit button? The form will be submitted twice and in consequence two emails will be sent instead of one.
There are multiple ways to fix this problem. The solution I will explain below is to disable the submit button once it has been pressed. In that way, even if the user double-clicks on it, the form will be submitted only once! π
To disable the submit button once it has been pressed, you simply need to add the following JavaScript code in the onclick
attribute of your button tag:
this.disabled=true;this.form.submit();
For example:
<input name="submitButton" id="submitButton" type="submit" value="Submit" onclick="this.disabled=true;this.form.submit();" />
The code above will work fine if you don’t have an onsubmit
attribute in your form tag. But, if you have one, you will notice that the function this.form.submit()
will not execute the content of the onsubmit
attribute. In that case, you need to force the call as shown below:
this.disabled=true;if(this.form.onsubmit()){this.form.submit();}else{this.disabled=false;}
However, it is recommended to move whatever you have in the onsubmit
attribute in the button onclick, such as:
this.disabled=true;if(validateForm()){this.form.submit();}else{this.disabled=false;}
NOTE:
If in your code, you are using the following to check if the form has been submitted:
if (isset($_POST['submitButton'])) { echo "Form submitted!"; }
It will need to be replaced by the following:
if ($_SERVER['REQUEST_METHOD'] == "POST") { echo "Form submitted!"; }
Detect if JavaScript is enabled
Because of the emergence of Ajax, people don’t disable JavaScript much nowadays.
I don’t know the percentage of people having disabled JavaScript. It is likely under 5%. But if you have a website visited by millions of visitors every month, even 1% is matter!
This is why I wrote the following code:
<noscript>JavaScript is DISABLED.</noscript> <span id="displayIfJavaScript" style="display:none">JavaScript is ENABLED.</span> <script> document.getElementById('displayIfJavaScript').style.display = "block"; </script>
The text under the noscript
tag will be displayed if JavaScript is disabled or not supported. The text under the span
tag is not displayed by default and will be showed using JavaScript, this is why we can be sure JavaScript is enabled in that case.
You can obviously change the content of the noscript
and span
tags. You could, for example, hide a form which uses JavaScript validation to non-JavaScript users by putting the HTML code of the form under the span
tag.
Please see below the above script in action:
Validate file size prior upload
If I ask you what is the most complex thing in HTML, what would you reply?
For me, it would be the file upload (or maybe character encoding, but this is not the topic! π ).
One of the problem around the file upload functionality is that there is, no matter what, a file size limit set on the server. The limit could be 100Kb such as 100Mb depending on the configuration of the server.
But what happens if the user tries to upload a file bigger than the limit?
It’s simple, the file is going to be uploaded on the server until the limit is reached. Once it happens, the server returns an error message to the client.
Well, this is not ideal!
Indeed, depending on the connection speed of the user, the error message could be displayed a few minutes later. And you know how impatient users are! π
So obviously, the solution would be to validate the file size before the upload starts.
To do that, we can simply use the fileSize
Javascript function against the upload field.
But, surprising enough, this function doesn’t work on Internet Explorer! πΏ
And the only solution I found to get the file size with IE was using ActiveX:
var oas = new ActiveXObject("Scripting.FileSystemObject"); var e = oas.getFile(document.forms[0].file.value); var size = e.size;
Finally, here is the whole Javascript function to validate the file size:
function validateFileSize(file, maxSize) { if (navigator.appName=="Microsoft Internet Explorer") { if (file.value) { var oas = new ActiveXObject("Scripting.FileSystemObject"); var e = oas.getFile(file.value); var size = e.size; } } else { if (file.files[0]!=undefined) { var size = file.files[0].fileSize; } } if (size!=undefined && size > maxSize) return false; return true; }
with file
the file input field to validate and maxSize
the maximum size in bits.
For example, you can call this function as follow:
validateImageSize(document.forms[0].file, 500000)
I successfully tested this code on:
- Google Chrome 6;
- Firefox 3.6;
- Internet Explorer 6;
- Internet Explorer 7.