Welcome to WebmasterWorld Guest from

Forum Moderators: open

Message Too Old, No Replies

newb Qu - how to get a file upload form inside a modal window

3:00 pm on Sep 28, 2011 (gmt 0)

New User

5+ Year Member

joined:Apr 29, 2010
votes: 0

Hey there everyone

I'm a bit new to javascript and having a bit of a problem.

I have a page users can click to upload a photo. When users click I want a modal window to pop up with a simple file upload input inside it and a submit button. I have this working except that when users click submit nothing happens. I'm using nyroModal [nyromodal.nyrodev.com ] and the code I use is:

<a href="#test" class="nyroModal"><img src="/img/uploadimage.gif" alt="" /></a>
<div id="test" style="display: none; width: 600px;"> <form id="ImageUploadForm" enctype="multipart/form-data" method="post" action="images/upload" accept-charset="utf-8">
<div style="display:none;">
<input type="hidden" name="_method" value="POST" />
<div class="input file">
<label for="ImageFileName">File Name</label>
<input type="file" name="data[Image][fileName]" id="ImageFileName" />
<div class="submit"><input type="submit" value="Upload" />

If I take the code out of the div=id"test" the form appears on the normal page and submits just fine. Inside the test div tho the modal window pops up with the form inside but the submit button does nothing.

Can anyone enlighten me what I'm doing wrong?
5:36 pm on Sept 28, 2011 (gmt 0)

Senior Member

WebmasterWorld Senior Member rocknbil is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Nov 28, 2004
votes: 0

Did you validate the document [validator.w3.org]? It could be an improper nesting or some other link overlaying it. A second possibility is than you have some action being assigned to #test form that is returning false on submit. Outside of #test, the action wouldn't get applied.

Check the Firefox error console to see if there are JS errors, and review it with the FireBug extension.