Question

119

Reset/clear modal form on closing it

rated 0 times [ 120] [ 1] / answers: 1 / hits: 31950 / 7 Years ago, sat, november 18, 2017, 12:00:00

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.net/qzzu2vqs/4/

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

daja

Add To Favorites

Follow

Total Points: 407

Total Questions: 103

Total Answers: 103

Location: Ghana

Member since Sun, Mar 27, 2022

2 Years ago

daja questions

1 How to delete a file in antd Upload component

Tue, Dec 21, 21, 00:00, 2 Years ago

1 map() with async vs promise.all()

Thu, Apr 23, 20, 00:00, 4 Years ago

1 React useEffect (with []) is called every time I change page (React Router)

Fri, Oct 25, 19, 00:00, 5 Years ago

1 Detect URL change in querystring

Fri, Sep 6, 19, 00:00, 5 Years ago

1 How to query relations with Knex.js?

Tue, Jul 23, 19, 00:00, 5 Years ago

View All

answered 7 Years ago laytonlamontm · Accepted Answer

Change following line of code from

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

to

$(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.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>