SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2010
    0 Post(s)
    0 Thread(s)

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

    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 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?

  2. #2
    SitePoint Addict
    Join Date
    Apr 2011
    2 Post(s)
    0 Thread(s)
    Try use the submit button with this code:
    <input type="button" value="Upload" onclick="this.form.submit();" />
    Free: Web Programming Courses HTML, CSS, Flash
    Web Programming: AJAX Course and PHP-MySQL Course video Lessons
    Good JavaScript and jQuery course for beginners


Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts