JQuery SimpleModal

Question

I've got a submit button inside my modal, and when it's pressed nothing happens! How do I make my form submit when the push my submit button? I don't want to use $('form').submit(); because then php doesn't detect that my button was clicked.

<script type="text/javascript" language="javascript">
    $(document).ready(function () { 
        $('#btnAdd').click(function (e) { 
            //clicking the button shows the modal popup up 
            e.preventDefault();
            $('#AddCareerItem').modal(); 
        });
        $('#btnCancelCareerContent').click(function (e) {
            //close the modal with the cancel button 
            $.modal.close();
        }); 
    }); 
</script>

Answer 1

Matt,

From the code you provided, it doesn't appear that you are binding to the submit event. What does the HTML inside #AddCareerItem look like? Are you using an submit input and have a correct form definition?

If you want to bind an event, you'll need to use the onShow callback. Something like:

$('#AddCareerItem').modal({onShow: function (dialog) {
    $("form", dialog.data).submit(function () {
        // your code here
    });
});

Hope that helps.

-Eric

http://www.ericmmartin.com

Answer 2

Heres the code I've got. Nothing fancy. The hidden form is inside the form tag and I'm using a submit button.

 <form action="somepage.php" enctype="multipart/form-data" method="post">
  <div class="rw">
   <div class="lb">Title</div>
   <div class="dt"><input type="text" name="txtTitle" value="" /></div>
   <div class="cr"></div>
  </div>
  <div class="rw">
   <div class="lb">Description</div>
   <div class="dt"><textarea name="txtDescription" ></textarea></div>
   <div class="cr"></div>
  </div>
  <div class="rw">
   <div class="lb">&nbsp;</div>
   <div class="dt"><button id="btnAdd" type="button" >Add Career Item</button></div>
   <div class="cr"></div>
  </div>
  <div class="rw">
   <div class="lb">&nbsp;</div>
   <div class="dt"><input type="submit" name="btnSave" value="Save" /></div>
   <div class="cr"></div>
  </div>
  <div id="AddCareerItem" style="display:none;">
    <div class="rw">
     <div class="lb">Type</div>
     <div class="dt"><select name="drpdwnType" ><option value="1">Duties</option><option value="2">Required</option></select></div>
     <div class="cr"></div>
    </div>
    <div class="rw">
     <div class="lb">Content</div>
     <div class="dt">
      <input name="txtCareerDetailContent" type="text" value="" />
     </div>
     <div class="cr"></div>
    </div>
    <div class="rw">
     <div class="lb">&nbsp;</div>
     <div class="dt"><input type="submit" id="btnAddCareerDetail" name="btnAddCareerDetail" value="Add" /> <input type="button" id="btnCancelCareerContent" value="Cancel" /></div>
     <div class="cr"></div>
    </div>
  </div>
 </form>

Answer 3

I'm having this exact same problem - was there ever a solution to it??? My team wants me to dump SimpleModal, but I still have faith in it. Unfortunately I only have today to solve this before they force me to move on. Any hints on how this was solved for this guy?

Answer 4

As jquery UI dialog does, simple-modal takes the buttons out of the < form > element than usually wraps everything in frameworks like ASP.NET and JSF, and prepends them to the < /body > closing tag. So you have to call modal with option persist: true and on clicking the "submit button" close the modal and trigger form submission. You have to close the modal so that the elements return to their normal position in the DOM... :)