Posts Tagged onclick

Prevent double-click on HTML form

Posted by smoreau in Html on 29 Jun 2011

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!"; }

, , , , ,

4 Comments

Onclick event is not fired on IE

Posted by smoreau in Html on 08 Dec 2009

I am pretty sure everybody knows that Internet Explorer has “a few” bugs… 🙄
You didn’t? 😯 Alright, better to stay on your little cloud and leave this blog right away!

For the others, I will talk about the JavaScript event onclick which is not fired when the following requirements are matched:

  • In a form;
  • There is only ONE input text element;
  • There is one button which has an onclick event assigned;
  • You press the ‘Enter’ button inside the input text element.

For a better understanding, let’s now take the following example:

<html>
    <head><title>Test</title><head>
    <body>
        <form>
            <input type="text" id="t1"/>
            <input type="submit" onclick="alert('onclick fired!'); return true;"/>
        </form>
    </body>
</html>

As you can see, there is nothing difficult in this code.
Well, that doesn’t mean Internet Explorer can handle it… 😆

The bug occurs if you press the ‘Enter’ button inside the input text element using Internet Explorer. Indeed, the onclick event is not fired and the text ‘onclick fired!’ is not display to the user! However, it works perfectly fine on Firefox and Safari.

The funny thing is this code works on Internet Explorer if you add another input text, even if it is hidden!
Why? Don’t ask me! 😐

Anyway, the following example works on IE:

<html>
    <head><title>Test</title><head>
    <body>
        <form>
            <input type="text" id="t1"/>
            <input type="text" style="display:none"/>
            <input type="submit" onclick="alert('onclick fired!'); return true;"/>
        </form>
    </body>
</html>

Why are we assigning an onclick event to the submit button?
It could be for a lot of reasons, but the main one is probably to validate the form before submitting the data.

By the way, RichFaces is very often using this event on the submit buttons.
So remember to add a hidden input text to your form if you want to allow users to use the ‘Return’ key. 🙂

, , , , , ,

3 Comments