Search code examples
submitoverlaybpopup

The <form> tag of my overlay disapear as it loads, and the submit button doesn't work of course


I am using bPopup to load a form in an overlay. The form is basically in a that is loaded hidden in the page, and by clicking a button on the page, the overlay shows up on top with the form in it.

I was using this code in another page before and it worked fine but wanted to go the overlay route as I felt the user experience was better.

So what happens is: The overlay loads perfectly, all fields are visible, but the submit button doesn't do anything. Using firebug, I looked at the code of the overlay and realized that my opening and closing tags are gone from the div.

I check and they are present in the when hidden.. so I'm guessing something happens with bPopup as I load the overlay.

I couldn't find anything in the regard and turn to the community.

Thanks

here is a sample of the code:

The div in the page I load:

<div id="fileuploadbox">
  <div id="fileupload_div" class="contentcontainer">
          <div class="headings alt">
                <h2>Upload a file</h2>
           </div>
           <div class="contentbox">
             <form action="**mycontroller**" method="post" enctype="multipart/form-data">        
             <p><span class='label'>File:</span><input type="file" name="file" value="" id="uploader" size="34"  /></p>
             <p><span class='label'>Description:</span><input type="text" name="description" value="" id="smallbox2" class="inputbox" maxlength="250"  /></p>
            <p><span class='label'>&nbsp;</span><input type="submit" name="" value="Upload file" class="btn"  />
    </form>  
           </div> <!-- content box -->
</div> <!-- contentcontainer -->
</div> <!-- fileuploadbox -->

The Button it self:

  <a href="#" class="fileuploadpop">
    <div id="fileuploadpop">   
         Upload a file         
    </div>
  </a>

The Javascript:

<script language="javascript">
    $(document).ready(function(){
            $("a.fileuploadpop").bind('click', function(){
             $("#fileuploadbox").bPopup();
             return false
            });
        });
</script>

Solution

  • The code you provided works fine in my mac Firefox and Chrome with bPopup. The submit button works!

    May be something to do with your btn class which I have not defined or you might try putting this in a bare-bone page to test with bPopup first to track and resolve any other conflict.