模态内的表单元素 [英] form element inside a modal

问题描述

我尝试将登录表单放在模式中，并向提交按钮添加了data-dismiss ="modal".模态已成功解除，但POST方法似乎没有触发"，并且页面保持不变.其他人尝试过将表单放在模式中并使其正常工作吗?

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.

推荐答案

将data-dismiss分配给链接或按钮将拦截该按钮的click事件并阻止其冒泡.如果将data-dismiss放在表单提交按钮上，则实际的提交"操作将永远不会触发，并且表单也不会提交.

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.

如果您要通过AJAX提交表单，请让成功事件触发该表单的撤消.如果您正在执行传统的表单发布，则不必担心会退出模式，因为页面将重新加载或重定向.

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.

这篇关于模态内的表单元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！