How to reset form body in bootstrap modal box?

Question

I am looking for a way to clear all elements found within an HTML form contained inside a Bootstrap modal without refreshing the page.

Currently:

The user enters data and closes the modal.

When the user re-opens the modal, the previously entered data still remains.

How can I completely clear all elements within the form during the close event of the modal dialog so that when the user re-opens it, they always get fresh clean inputs & etc?

Answer 1

Just find your form and clear before it opens!

    $modal = $('#modal');
    $modal.find('form')[0].reset();

Answer 2

In Bootstrap 3 you can reset your form after your modal window has been closed as follows:

$('.modal').on('hidden.bs.modal', function(){
    $(this).find('form')[0].reset();
});

Answer 3

Mark Berry's answer worked fine here. I just add to split the previous code:

$.clearFormFields = function(area) {
  $(area).find('input[type="text"],input[type="email"],textarea,select').val('');
};

to:

$.clearFormFields = function(area) {
                $(area).find('input#name').val('');
                $(area).find('input#phone').val("");
                $(area).find('input#email').val("");
                $(area).find('select#topic').val("");
                $(area).find('textarea#description').val("");
            };