Question

我已经使用Bootstrap创建了一个模态对话框，但是在关闭框或提交框之后，模态对话框没有清除表单输入字段时出现问题。

HTML

    <!-- Password Reset Modal -->
<div id="passwModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4>Forgot Password?</h4>
        <p>Please enter your registered email address below and a new password will be sent to you.</p>
    </div>
    <div class="modal-body">
        <div id="sent"><!-- Display sent message after password reset -->
            <form class="form-horizontal" id="reset">
                <div class="control-group">
                    <label class="control-label" for="Email">Username</label>
                    <div class="controls">
                        <input class="input-large" type="email" id="Username" name="Username" placeholder="Email Address">
                    </div>
                </div>
                <div class="controls">
                    <button class="btn btn-inverse" id="close" value="CANCEL" data-dismiss="modal" aria-hidden="true">CLOSE</button>
                    <button class="btn btn-success" id="submit">SEND</button>
                </div>
            </form>
        </div><!-- end of sent -->
    </div>
</div><!-- end of Password Reset Modal -->

JavaScript（验证＆amp; ajax）

    $(document).ready(function () {
jQuery.validator.addMethod("accept", function (value, element, param) {
    return value.match(new RegExp("." + param + "$")); });
$("#register").validate({
    rules: {
        FirstName: {
            required: true,
            accept: "[a-zA-Z]+"
        },
        LastName: {
            required: true,
            accept: "[a-zA-Z]+"
        },
        Pwd: {
            required: true,
            minlength: 8
        },
        CPwd: {
            required: true,
            minlength: 8,
            equalTo: "#Pwd"
        },
        Email: {
            required: true,
            email: true
        },
        Agree: "required"
    },
    messages: {
        FirstName: {
            required: "First name required.",
            accept: "Letters only please."
        },
        LastName: {
            required: "Last name required.",
            accept: "Letters only please."
        },
        Pwd: {
            required: "Please create a password.",
            minlength: "Password must be at least 8 characters."
        },
        CPwd: {
            required: "Please confirm password.",
            minlength: "Password must be at least 8 characters.",
            equalTo: "Passwords do not match."
        },
        Email: "Email address is not valid.",
        Agree: "Please accept our policy."
    },
    submitHandler: function() {
        $.ajax({
            type: "POST",
            url: "../process.php",
            data: $('form#register').serialize(),
            success: function (msg) {
                $("#thanks").html(msg)
            },
            error: function () {
                alert("failure");
            }
        });
      }
    });
  }); // end document.ready

Answer 1

对于现在使用新Bootstrap（目前为v3.1.1）的任何人来说，只需对上一个答案进行更新，需要回答这个问题！

    $('#passwModal').on('hidden.bs.modal', function (e) {
         $('#Username').val('');
     });

Answer 2

要确保在重新打开模式时表单将为空，您可以对表单上的每个字段执行此操作。它会在关闭模式的隐藏状态时删除字段的最后一个值：

$('#passwModal').on('hidden', function () {
      $('#Username').val("");
 });

Bootstrap Twitter Modal - 清除对话框输入字段

2 个答案: