homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

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

Msg#: 4368296 posted 3:00 pm on Sep 28, 2011 (gmt 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?



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

Msg#: 4368296 posted 5:36 pm on Sep 28, 2011 (gmt 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.

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved