Stop <enter> from submitting form on file input in IE8

Question

IE8 renders a textbox alongside the browse button for a file input:

<input type="file" />

I understand that there are a number of security constraints regarding what you can do with file inputs using JavaScript but is there a good way to stop the parent form submitting when a user focuses on this textbox and presses enter?

Answer 1

I would look at using jQuery's keypress and catching it. I haven't done this myself to test but have a look here:

http://forum.jquery.com/topic/how-to-catch-keypress-on-body

Answer 2

The simplest way is to simply return false in the onSubmit event handler on the form element. Presumably, you have a button elsewhere in the form that you want to actually trigger the form submit. On that button, you can add an onclick handler that calls form.submit(). When you submit the form programmatically, the onSubmit handler is not fired.

Might look something like this:

<form id="myform" method="post" action="http://yourserver/page" onSubmit="return false;">
    <input id="myfile" type="file" name="file"/>
    <input type="button" value="upload" onClick="submitForm();" />
</form>

<script type="text/javascript">

function submitForm()
{
    // if no file, don't submit
    var file = document.getElementById("myfile");
    if (file.value.length == 0) return;

    var form = document.getElementById("myform");
    form.submit();
}