CODEWITHSUNDEEP
jquerysimplemodal
Matt
Matt

Reputation: 6422

JQuery SimpleModal

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>

Upvotes: 0

Views: 1915

Answers (3)

dp.
dp.

Reputation: 11

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... :)

Upvotes: 1

Matt
Matt

Reputation: 6422

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>

Upvotes: 0

Eric Martin
Eric Martin

Reputation: 2841

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

Upvotes: 1

Related Questions