IE requiring multiple clicks on submit

Question

I have a form with a file control and a separate button that causes the click event to fire on that file field. The problem is that if you click the button, then the submit button at the bottom of the page requires two clicks in IE. How do I prevent that?

In it's most simply form, here's the code:

HTML:

<form action="#">
  <input type="file" id="myFile" />
  <button id="myButton">** My Choose **</button>
  <input type="submit" value="Submit" />
</form>

JavaScript:

$(function() {
    $('#myButton').click(function(e) {
        e.preventDefault();
        $('#myFile').click();
    });
});

A more in-depth sample at JSFiddle: http://jsfiddle.net/XPqQB/6/

In IE, clicking on the "My Choose" button will then require two clicks on "Submit" to actually post. (Usually "myFile" would be hidden, but for demo purposes I'm leaving it visible.)

Test steps:

• Case 1:
  1. Refresh page.
  2. Click "Submit". Confirm submission (via dev tools).
• Case 2:
  1. Refresh page.
  2. Click "Browse..." next to file input, select file.
  3. Click "Submit". Confirm submission (via dev tools). (Sometimes even this requires two clicks!)
• Case 3:
  1. Refresh page.
  2. Click "My Choose", select file.
  3. Click "Submit". No action.

You can also see that in case 2 and 3 that sometimes the .click() or .submit() events are not being triggered either.

A further interesting aspect of this is when there's more than one file input on the page. If there are three, and you do the above three times, you have to click on the submit button four times total to submit the page.

Answer 1

the solution is to use a label that points to the file input, you can apply any styling to the label and it will work

<label for="myFile">** My Label **</label><br/>
<input type="file" id="myFile" name="myFile" />

as i understand it is caused by IE9 security restrictions