清除打開模態的輸入字段不起作用

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 
}