jQuery form submit event

Question

I have a photo upload form that I'm working on that works like this:

You click an "Upload Photo" button. jQuery detects the click and triggers a click event to a hidden "file" field within the form, which brings up a dialog to search through your files.

When the user selects a file, the change event is detected on the hidden file field and triggers a form submission. Here is the code:

// on photo upload button click:
$("input[name=PhotoUpload]").click(function() {
    $("input[name=Photo]").click();
});

// on photo upload:
$("input[name=Photo]").change(function() {
    $("form[name=MediaUpload]").submit();
});

and the form:

<form name="MediaUpload" method="post" action="/postad/media.cfm" target="Media" enctype="multipart/form-data">
    <input type="button" name="PhotoUpload" value="Upload Photo">
    <input type="file" name="Photo" size="30" style="visibility:hidden;">
</form>

This works great in Chrome and FireFox, but am having no luck in any version of IE. Any suggestions?

I seem to recall that IE won't allow for focus() to be assigned to a hidden element, which would probably preclude the click() event too. — David Thomas
– David Thomas, Commented Aug 13, 2011 at 22:44
What's happening in IE? Any errors? Have you looked in the console? — Adam Hopkinson
– Adam Hopkinson, Commented Aug 13, 2011 at 22:44
Yeah, forgot to mention. I tried displaying the hidden form elements also. And, no, there are no errors in the console. — Josh
– Josh, Commented Aug 13, 2011 at 22:50
The file dialog comes up just fine. It just doesn't submit when I select the file. I tried adding a submit event also that displays an alert box when the file is chosen. The alert box displays, but the form never submits. — Josh
– Josh, Commented Aug 13, 2011 at 22:52

jk. · Accepted Answer · 2011-08-14 00:28:29Z

1

I would suggest trying this a little differently:

// on photo upload button click:
$("input[name=PhotoUpload]").click(function() {
    $("#your_dialog").dialog("open");
});

//Remove the `.change` function.
// add the form submit line below after the dialog code changes the `Photo` field
$("form[name=MediaUpload]").submit();

It's easy to confuse IE with javascript. If it hits something that gives it indigestion, it stops processing the js.

edited Aug 14, 2011 at 0:28

answered Aug 14, 2011 at 0:11

jk.

14.4k4 gold badges45 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

jQuery form submit event

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related