How clear bootstrap modal on hide

Question

How to can you clear the bootstrap modal on dismiss/hide/close?

I have the following Modal definition:

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
   Add New Comment
</button>

Partial view which contains Modal

@Html.Partial("_CreateComment", Model)


 // Partial view which contains modal

 <div class="modal fade" id="myModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
      @using (Ajax.BeginForm("AddComment", "Blog", new AjaxOptions
            {
                HttpMethod = "POST",
                InsertionMode = InsertionMode.Replace,
                UpdateTargetId = "comments",
                OnSuccess = "$('#myModal').modal('hide');"

            }))
      {
        <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">Add Comment</h4>
        </div>
        <div class="modal-body">
                @Html.ValidationSummary(true)
                @Html.HiddenFor(model => model.Blog.BlogID)

                <div class="form-group">
                    @Html.LabelFor(model => model.BlogComment.Comment)
                    @Html.TextAreaFor(model => model.BlogComment.Comment, 4, 104, new { @class = "form-control" })
                    @Html.ValidationMessageFor(model => model.BlogComment.Comment)
                </div>

        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-primary">Save changes</button>
            <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
        </div>
      }
  </div>
   </div>
</div>

And this is the javascript I am using to to clear the content:

$(function () {
    //clear modal cache, so that new content can be loaded
    $('body').on('hidden.bs.modal', '.modal', function () {
        $(this).removeData('bs.modal');

    });
});

If I dismiss the modal after having entered some content or upon submission the content in the form doesn't clear?

score 29 · Accepted Answer · answered Jun 24 '15 at 11:01

29

this is the easiest fix:

$('#myModal').on('hidden.bs.modal', function () {
    $(this).find("input,textarea,select").val('').end();

});

answered Jun 24 '15 at 11:01

adam78

9,668
24
96
207

1

Solved it for me. Thanks – DavidHyogo Nov 18 '15 at 14:32
3

I recommend using `.val([])` if you wish to clear `select` also. Also, `.end()` is not needed in this case, it is especially useful to reset the state when chaining. – Fr0zenFyr Apr 28 '16 at 08:09
how to clear input type="checkbox"? I've try by putting `input type="checkbox"` & `input#id` but this doesn't work. – Wafie Ali Dec 08 '16 at 01:18
1

This solution was removing the value of my submit button on my modal. I used the solution of @GuruprasadRao. – Raphael Monteiro Apr 07 '17 at 23:16
@RaphaelMonteiro You can filter... $(this).find('input:not([type=submit]), textarea, select').val([]); – Cava Feb 24 '18 at 04:38
@WafieAli This code works too for checkbox $(this).find('input, textarea, select').val([]); – Cava Feb 24 '18 at 04:39

Guruprasad J Rao · Answer 2 · 2015-06-24T11:03:34.483

9

Use val('') based on input types present and use #myModal instead of body

$('#myModal').on('hidden.bs.modal', function () {
        $('.modal-body').find('textarea,input').val('');
});

DEMO

edited Jun 24 '15 at 11:03

answered Jun 24 '15 at 09:38

Guruprasad J Rao

29,410
14
101
200

1

It doesn't work? I add content to the text field and click close then reopen the modal and content in the text field is still there? – adam78 Jun 24 '15 at 10:07
That removes entire body including the input fields? I need the input fields still there, just the content inside the input fields to be cleared. – adam78 Jun 24 '15 at 10:11
@ozzii- i asked same question [link](http://stackoverflow.com/questions/27224696/unable-to-removedata-from-modal-on-close-showing-same-content-everytime).but i never got the answer so i used location.reload to clear my modal every time. – Bugfixer Jun 24 '15 at 10:19
2

easiest is to do ` $(this).find("input,textarea,select").val('').end();` which fixes it. – adam78 Jun 24 '15 at 11:00

score 2 · Answer 3 · answered Jan 13 '20 at 12:19

2

This worked for me

$('body').on('hidden.bs.modal', '.modal', function () {
        $(".modal-content").empty();
      });

answered Jan 13 '20 at 12:19

Mahmoud-Abdelslam

615
6
15

How clear bootstrap modal on hide

3 Answers3

Linked