Home » Javascript » How do I remove content from a modal-body upon closing the modal?

How do I remove content from a modal-body upon closing the modal?

Posted by: admin August 19, 2018 Leave a comment

Questions:

My goal is to display a fresh modal every time it is opened. Currently, that is only true when the modal window is first displayed after refreshing the page. For the subsequent closing/opening of the modal, it just appends the current content to the end of the previous content, which is still displayed.

It may be worth noting that with this particular configuration of the countless efforts tried, I get an

Uncaught ReferenceError: $ is not defined

in my Javascript console for the line

$(document).ready(function() { 

but I’m not sure why. The jQuery library (3.2.1) is initialized for the script type it’s being used with after all. Any clue?

<!-- Form -->
<form onsubmit="return false">

  <!-- Heading -->
  <h3 class="dark-grey-text text-center">
    <strong>Calculate your payment:</strong>
  </h3>
  <hr>

  <div class="md-form">
    <i class="fa fa-money prefix grey-text"></i>
    <input type="text" id="income" class="form-control">
    <label for="income">Your income</label>
  </div>

  <div class="text-center">
    <button type="button" class="btn btn-pink" onclick="calculator()" data-toggle="modal" data-target="#exampleModal">Calculate</button>
    <script type='text/javascript'>
      function calculator() {
        let payment = ((document.getElementById("income").value - 18210)*0.1)/12;
        payment = Math.round(payment);
        if (payment <= 0) {
          $('.modal-body').append("$0 per month.");
        }
        else {
          $('.modal-body').append(payment + " or less per month.");
        }
       }
    </script>

    <!-- Modal -->
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">You should be paying:</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div id="test" class="modal-body">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Clear content from modal -->
    <script type="text/javascript">
      $(document).ready(function() {
        $('.exampleModal').on('hidden.bs.modal', function () {
          $('.modal-body').clear();
        });
      });
    </script>
    <hr>
    <label class="grey-text">* This is just an estimate. Please call for a quote.</label>
    </fieldset>
  </div>

</form>
<!-- Form -->
Answers: