javascript - Resetclear modal form on closing it

I am trying to reset/clear my form inside the modal when I close it but this does not seem to work. This is my code:

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

Can someone guide me on what needs to be corrected.Thanks This is fiddle link

I am trying to reset/clear my form inside the modal when I close it but this does not seem to work. This is my code:

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

Can someone guide me on what needs to be corrected.Thanks This is fiddle link

https://jsfiddle/qzzu2vqs/4/

Share Improve this question edited Nov 18, 2017 at 17:04 asked Nov 18, 2017 at 11:35 Swati Singh 211 gold badge1 silver badge7 bronze badges

Add a ment |

2 Answers 2

Sorted by: Reset to default 2

Change following line of code from

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

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

Edited

Please check following code

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

<link href="https://maxcdn.bootstrapcdn./bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn./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>

Use document.getElementById("form2").reset(); or $('#form2')[0].reset();

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

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn./bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn./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>

Or reset it on call:

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

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Resetclear modal form on closing it - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)