在Laravel中单击关闭时清除模式中的数据

Question

我有一个用于创建新产品的模式（Bootstrap）。当我点击创建新产品的“关闭”按钮时，旧数据仍然不能从模式中清除。

我的代码：

<div class="modal fade" id="product" role="dialog" aria-hidden="true" data-target="#myModal" data-backdrop="static" data-keyboard="false" > 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal">&times;</button> 
       <h4 class="modal-title">Create new product</h4> 
      </div> 
      <div class="modal-body"> 
       <form role="form" action="{{ route('admin.product.addProduct')}}" method="post" id="frmProduct"> 
        {{ csrf_field() }} 
        <input type="hidden" name="_token" value="{{ csrf_token() }}"> 
        <div class="row"> 
         <div class="col-md-6"> 
          <div class="form-group"> 
           <label for="">Product Name</label> 
           <input type="text" class="form-control" id="" name="product_name"> 
          </div> 
          <div class="form-group"> 
           <label for="">Product Type</label> 
           <input type="text" class="form-control" id="" name="product_type_id"> 
          </div> 
          <div class="form-group"> 
           <label for="">Price</label> 
           <input type="text" class="form-control" id="" name="price"> 
          </div> 
          <div class="form-group"> 
           <label for="">Status</label> 
           <select class="form-control input-sm m-bot15" id="" name="status"> 
            <option value="0">Inactive</option> 
            <option value="1">Active</option> 
           </select> 
          </div> 
          <div class="form-group"> 
           <label for="img">Image</label> 

           <div class="input-group"> 
            <span class="input-group-btn"> 
             <span class="btn btn-default btn-file"> 
              Choose <input type="file" id="imgInp"> 
             </span> 
            </span> 
            <input type="text" class="form-control" name="product_image" readonly> 
           </div> 
           <img id='img-upload' class="image_responsive" /> 
          </div> 
         </div> 

        <div class="col-md-6"> 
         <div class="form-group"> 
          <label for="">Description</label> 
          <textarea class="form-control" id="" name="description"></textarea> 
         </div> 
         <div class="form-group"> 
          <label for="">Note</label> 
          <textarea class="form-control" id="" name="addition_information"></textarea> 
         </div> 

        </div> 
       </div> 
      </div> 
      <div class="modal-footer"> 
        <input type="submit" value="Save" class="btn btn-success"> 
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
      </div> 
     </form> 
    </div> 

</div> 
</div> 

关闭模式时，我怎样才能清除这些数据？

Answer 1

您可以通过添加一个id关闭按钮例如id=close-btn事件监听器添加到您的关闭按钮：

document.getElementById("close-btn").addEventListener("click", function(){ 
    document.getElementById("frmProduct").reset(); 
}); 

Answer 2

您可以使用hidden.bs.modal事件：

当模式已完成从用户被隐藏此事件被触发（等待CSS过渡完成）。

的片段：

$('#product').on('hidden.bs.modal', function(e) { 
 
    $(this).find('form').trigger('reset'); 
 
})

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 

 
<!-- Button trigger modal --> 
 
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#product"> 
 
    Launch modal 
 
</button> 
 
<div class="modal fade" id="product" role="dialog" aria-hidden="true" data-target="#myModal" data-backdrop="static" data-keyboard="false" > 
 
    <div class="modal-dialog"> 
 
     <div class="modal-content"> 
 
      <div class="modal-header"> 
 
       <button type="button" class="close" data-dismiss="modal">&times;</button> 
 
       <h4 class="modal-title">Create new product</h4> 
 
      </div> 
 
      <div class="modal-body"> 
 
       <form role="form" action="{{ route('admin.product.addProduct')}}" method="post" id="frmProduct"> 
 
        {{ csrf_field() }} 
 
        <input type="hidden" name="_token" value="{{ csrf_token() }}"> 
 
        <div class="row"> 
 
         <div class="col-md-6"> 
 
          <div class="form-group"> 
 
           <label for="">Product Name</label> 
 
           <input type="text" class="form-control" id="" name="product_name"> 
 
          </div> 
 
          <div class="form-group"> 
 
           <label for="">Product Type</label> 
 
           <input type="text" class="form-control" id="" name="product_type_id"> 
 
          </div> 
 
          <div class="form-group"> 
 
           <label for="">Price</label> 
 
           <input type="text" class="form-control" id="" name="price"> 
 
          </div> 
 
          <div class="form-group"> 
 
           <label for="">Status</label> 
 
           <select class="form-control input-sm m-bot15" id="" name="status"> 
 
            <option value="0">Inactive</option> 
 
            <option value="1">Active</option> 
 
           </select> 
 
          </div> 
 
          <div class="form-group"> 
 
           <label for="img">Image</label> 
 

 
           <div class="input-group"> 
 
            <span class="input-group-btn"> 
 
             <span class="btn btn-default btn-file"> 
 
              Choose <input type="file" id="imgInp"> 
 
             </span> 
 
            </span> 
 
            <input type="text" class="form-control" name="product_image" readonly> 
 
           </div> 
 
           <img id='img-upload' class="image_responsive" /> 
 
          </div> 
 
         </div> 
 

 
         <div class="col-md-6"> 
 
          <div class="form-group"> 
 
           <label for="">Description</label> 
 
           <textarea class="form-control" id="" name="description"></textarea> 
 
          </div> 
 
          <div class="form-group"> 
 
           <label for="">Note</label> 
 
           <textarea class="form-control" id="" name="addition_information"></textarea> 
 
          </div> 
 

 
         </div> 
 
        </div> 
 
      </div> 
 
      <div class="modal-footer"> 
 
       <input type="submit" value="Save" class="btn btn-success"> 
 
       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
      </div> 
 
      </form> 
 
     </div> 
 

 
    </div> 
 
</div>