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)

5+ Year Member

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 Sep 28, 2011 (gmt 0)

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

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.

Featured Threads

Hot Threads This Week

Hot Threads This Month