关闭它时重置/清除模态表格

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>

有人可以指导我需要纠正的事情。谢谢 这是小提琴链接

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

Answer 1

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

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

或reset call：

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

Answer 2

从

更改以下代码行

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

到

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

<强>被修改

请检查以下代码

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;