Form is double submitted in IE

Not sure if this is common or stupid. I found that the <button> may cause form being double submitted in IE, if the button type is not set.

For exmaple,

<form id="target" action="edit.php">
    <input type="text" name="w" maxlength="20" placeholder="Enter something ..." />
    <button class="send">Double Submit In IE</button>
</form>

In the above html code, the button’s type is not set, and it defaults to “submit”, so when you click the button, it will submit the form, which is fine. But if you want to bind the click event to this button (may be do something,) and then trigger the form submission, then it may causes the form bening doubled submited in IE. See the Javascript code below.

$(document).ready(function(){
	$('.send').click(function() {
	    //do something ...
            $("#target").submit();
        });
});

Basically, the jQuery can bind multiple envents to a single action, so in this case, jQuery adds additional submit action to the button, it seems works fine in Firefox and Chrome (I think they ignore the second one), but in IE, the form is actually submitted twice, and if the backend action is writing the submitted data into database, then it may cause duplicated entries. In order to prevent this from happening in IE, you have to implicitly set button type to be “button”, like below (It’s wired that <button>’s default type is “submit” not “button”, isn’t it?)

<form id="target" action="edit.php">
    <input type="text" name="w" maxlength="20" placeholder="Enter something ..." />
    <button class="send" type="button">Submit</button>
</form>

Some important notes of html form

enctype

  1. if you don’t specify the enctype, then it uses “application/x-www-form-urlencoded” by default.
  2. If you cannot figure why your form cannot upload file, first thing you need to check is if you have set enctype to “multipart/form-data”. Yes, “mulipart/form-data” is a required enctype to upload your file.
  3. Seems there is not different between “application/x-www-form-urlencoded” and “plain/text”, although W3School says, in the case of the former, all characters are encoded before sent, and in the case of the latter, spaces are converted to “+” symbols, but no special characters are encoded. And you don’t need to decode the passing data thru either $_POST or $_GET.

passing data thru url

  1. If the form method is “GET”, then you can also pass the data thru url, and in this case remember urlencode your data if you data have some special character like “&”.  you can do it by PHP function urlencode($data); or JavaScript function escape(data).
  2. If the data is very long, like a few thousands char, then you probably cannot pass it thru url or GET method, use POST from instead. Because per Microsoft, “if you are using the GET method, you are limited to a maximum of 2,048 characters, minus the number of characters in the actual path.”, which is for IE, but I think there are similar limitation in other type of browsers.

input or textarea

For text type data, you can pass it thru <input>, like <input type=”text” value=”<?php echo $somevalue?>” />. In this case, note that,

  1. $somevalue must be escaped if it has double quote in there, otherwise it will mess up the form data. In PHP, you can do it by urlencode() function. In this case, when your retrieve data from $_GET or $_POST, you would not need to decode it, otherwise, there is encoded character, like %22, (stands for double quote)
  2. There is a limit of the length of text type input, not sure what it is, but I got problem in my test when there are 12388 chars. So if you data is too big, then you may just use Textarea, and you don’t need to encode the data in Textarea.