herkypam
herkypam

Reputation: 85

JS: How to hide a bootstrap modal so that the input data doesn't persist?

I have a modal I am including in my app and during the the checkout process, I show the modal. If the transaction fails, I hide the modal using $('#my-modal').modal('hide') but my issue is that when the user goes to enter the checkout process again and it shows the modal, it still has the data that was there before. Is it possible to destroy the instance so that the data doesn't persist that?

Upvotes: -4

Views: 178

Answers (2)

Lucas Ayrosa
Lucas Ayrosa

Reputation: 176

You can try make a function to clean the modal's inputs and call the function here, after the modal closes:

$('#myModal').on('hidden.bs.modal', function (e) {
  // your function to clean modal's inputs...
})

Upvotes: 1

Kristijan Stefanoski
Kristijan Stefanoski

Reputation: 262

I would just reset the inner HTML of the fields by id to empty.

Edit: Code bellow document.getElementById("field").innerHTML = "";

Edit 2: There is already a Bootstrap event that gets called on hide

 $('#MyModal').on('hidden.bs.modal', function () {
     $(this).find('form').trigger('reset');
 })

Will reset all the fields if you have a form inside the modal in question.

Upvotes: 1

Related Questions