關閉時重置/清除模態窗體

Question

我正在嘗試在關閉模式時重置/清除表單內的窗體，但這似乎不起作用。這是我的代碼：

<a href = "#myModal" data-toggle="modal" data-target = "#edit-modal"><span class = "glyphicon glyphicon-tag"></span></a> 
<div id="edit-modal" class="modal fade" role="dialog" aria-hidden="true"> 
<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">Add tags</h4> 
    </div> 
    <div class="modal-body"> 
    <form name = "form2" id = "form2" method = "post" action = "{% url 'savetag' %}" class = "form-inline"> 
    {% csrf_token %} 
    <div class = "form-group"> 
    <input name = "tag" id = "tag" required> 
    <button type = "submit" class = "btn btn-danger">Save</button> 
    </div> 
    </form> 
    </div> 
    <div class="modal-footer"> 
    </div> 
    </div> 
    </div> 
    </div> 


<script> 
    $('#edit-modal').on('hidden.bs.modal', function(e){ 
      $(this).find('form2')[0].reset();   
    }); 
    </script> 

有人能指導我哪些地方可以corrected.Thanks 這是小提琴鏈接

https://jsfiddle.net/qzzu2vqs/4/

Answer 1

更改以下從

$(this).find('form2')[0].reset(); 

的代碼行

$(this).find('#form2')[0].reset(); 

編輯

請檢查下面的代碼

$('#edit-modal').on('hidden.bs.modal', function(e) { 
 
    $(this).find('#form2')[0].reset(); 
 
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#edit-modal"> 
 
    Launch demo modal 
 
</button> 
 
<div id="edit-modal" class="modal fade" role="dialog" aria-hidden="true"> 
 
    <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">Add tags</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
     <form name="form2" id="form2" method="post" action="{% url 'savetag' %}" class="form-inline"> 
 
      {% csrf_token %} 
 
      <div class="form-group"> 
 
      <input name="tag" id="tag" required> 
 
      <button type="submit" class="btn btn-danger">Save</button> 
 
      </div> 
 
     </form> 
 
     </div> 
 
     <div class="modal-footer"> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

使用document.getElementById("form2").reset();或$('#form2')[0].reset();

$("#myBtn").click(function() { 
 
document.getElementById("form2").reset(); 
 
    $("#edit-modal").modal(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 
<div id="edit-modal" class="modal fade" role="dialog" aria-hidden="true"> 
 
    <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">Add tags</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
     <form name="form2" id="form2" method="post" action="{% url 'savetag' %}" class="form-inline"> 
 
      {% csrf_token %} 
 
      <div class="form-group"> 
 
      <input name="tag" id="tag" required> 
 
      <button type="submit" class="btn btn-danger">Save</button> 
 
      </div> 
 
     </form> 
 
     </div> 
 
     <div class="modal-footer"> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 

 

 
<script> 
 
</script> 
 

 
<button type="button" data-toggle="modal" id="myBtn">Open Modal</button>

或者reset它call：

$('#edit-modal').on('hidden.bs.modal', function (e) { 
document.getElementById("form2").reset(); //or $('#form2')[0].reset(); 
})