Question

I tried putting my login form inside a modal and added data-dismiss=”modal” to the submit button. The modal is dismissed successfully but the POST method does not seem to “fire” and the page remains the same. Anyone else tried putting a form inside a modal and got it working?

     <div class="modal hide fade" id="signin-register" tabindex="-1" role="dialog" aria-labelledby="image-modal-label" aria-hidden="true">


    <div class="modal-body">
        <div class="row-fluid">
            <div class="span12">

            <div class="span6">
                <div class="row-fluid">
                    <div class="span12">

                        <legend>Sign in</legend>

                        <form class="navbar-form pull-right" method="POST" action="login/">
                          <input type="hidden" name="a" value="validate" />
                            <input class="input-small" type="text" placeholder="Username" name="username">
                            <input class="input-small" type="password" placeholder="Password" name="password">
                            <button class="btn btn-small btn-info" type="submit" class="btn2" data-dismiss="modal"><strong>sign in</strong></button>
                        </form>

                        <legend>Register</legend>


                        <form action="" method="POST" id="register_form">

                            <label>Username:*</label><input class="input-small" type="text" name="username" placeholder="Username" />

                            <label>Password:*</label><input class="input-small" type="password" name="password" placeholder="Password" />

                            <label>Email:*</label><input type="text" name="email" placeholder="E-mail" /><br>
                            <input type="submit" name="a" value="Register" data-dismiss="modal"/>

                         </form>

                    </div>
                </div>
            </div>

            <div class="span6">
                <div class="row-fluid">
                    <div class="span12">


                    </div>
                </div>
            </div>



            </div>
        </div>
    </div>

    <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    </div>
</div>

And I double confirmed that the login form works outside the modal.

Answer 1

Assigning data-dismiss to a link or button will intercept the click event of that button and prevent it from bubbling up. If you put data-dismiss on a form submit button, the actual “submit” action will never be fired and the form will not be submitted.

If you’re going to submit the form via AJAX, have the success event trigger the dismissal of the form. If you’re doing a traditional form post, don’t worry about dismissing the modal since the page will reload or redirect.