关闭它时重置/清除模式形式答案

【问题标题】：Reset/clear modal form on closing it关闭它时重置/清除模式形式
【发布时间】：2017-11-18 11:35:35
【问题描述】：

当我关闭它时，我试图在模式中重置/清除我的表单，但这似乎不起作用。这是我的代码：

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

【问题讨论】：

标签： javascript jquery twitter-bootstrap forms bootstrap-modal

【解决方案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>

【讨论】：

您的答案似乎正确，但不幸的是它在我的代码中不起作用。原因可能是我的模态在 glyphicon 标签上打开
您能否提供更多关于此的信息。一个 plunker/fiddler 链接就可以了。
不要在 JSFiddle 的“JAVASCRIPT”部分使用脚本标签。同时删除 document.getElementById("#form2")[0].reset();并使用 $('#form2')[0].reset();
好的，如果你真的想让它在你的实际代码上工作，那么我必须看看。

【解决方案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>

或resetcall：

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

【讨论】：