Question

我需要在打开模态时清除输入字段值。我为此写了一些代码，但它没有用。下面是我的模态和脚本代码

模态

<div class="modal fade" id="Modal" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">

              <button type="button" class="close" data-dismiss="modal">&times;</button>   
              <h2>Forgot Password</h2>       
            </div>
            <div class="modal-body">
                <form id="forgotPasswordForm" name="" method="post">
                    <p><b>Please enter Registered email-id on which you want your reset password link.</b></p>
                    <br>
                    <div class="form-group">
                        <input type="email" name="email_id" id="email_id" class="input form-control" placeholder="Enter your email" required>
                        <div id="email_id-error"></div>
                    </div>
                    <div class="form-group text-center">                        
                        <input type="button" class="button" data-dismiss="modal" name="" value="Cancel">
                        <input type="submit" class="button" value="Submit">
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

Java脚本

<script type="text/javascript">
 $(document).ready(function(){
    $('#Modal').on('hidden.bs.modal', function () {
        $(this).find("input").val('').end();
    });
 });
</script>

Answer 1

尝试使用类名而不是模态ID。例如，

$(".modal").on('hidden.bs.modal', function () {
        $(this).find("input").val('').end();
});

Answer 2

好吧，因为您正在使用表单，您可以附加一个提交函数，如下所示：

<div class="modal fade" id="Modal" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">

              <button type="button" class="close" data-dismiss="modal">&times;</button>   
              <h2>Forgot Password</h2>       
            </div>
            <div class="modal-body">
                <form id="forgotPasswordForm" name="" method="post" onsubmit='clearFields(e)'>
                    <p><b>Please enter Registered email-id on which you want your reset password link.</b></p>
                    <br>
                    <div class="form-group">
                        <input type="email" name="email_id" id="email_id" class="input form-control" placeholder="Enter your email" required>
                        <div id="email_id-error"></div>
                    </div>
                    <div class="form-group text-center">                        
                        <input type="button" class="button" data-dismiss="modal" name="" value="Cancel">
                        <input type="submit" class="button" value="Submit">
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

function clearFields(e){
    $("input").val("");
    //more code if you want to something else
}

清除打开模态上的输入字段不起作用

2 个答案: