Clear fields when closing div

July 12, 2023

To open and close div I used the following code:

$('#addvisit').on('click', function(e) {
    e.stopImmediatePropagation();
  $('#fechvisit').slideToggle('slow');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<button type="button" id="addvisit" class="hs-button primary large">Adicionar Visitante</button>

<div id="fechvisit" style="display: none;">
  <div class="row">
    <div class="col-xs-12">
      <div class="form-group">
        <label for="titl"> <strong>NOME VISITANTE</strong></label>
        <select class="js-states form-control" name="titl" id="titl">
          <option></option>
          <option value="teste">teste</option>
          <option value="teste1">teste1</option>
        </select>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-6">
      <div class="form-group">
        <label for="contac"> <strong>CONTACTO VISITANTE</strong></label>
        <input type="text" name="contac" class="form-control" id="contac">
      </div>
    </div>
  </div>
</div>

The problem I have is the following:

If you open the div and place values in the select or input, if you close the div again, the fields are not cleared. I intended that whenever I closed the div, it would clear the fields.

Can you help?

>Solution :

You would need to detect if the div is open or closed, and then set the values to of the inputs to nothing.

$('#addvisit').on('click', function(e) {
  e.stopImmediatePropagation();
  $('#fechvisit').slideToggle('slow', function() {
    if (!$(this).is(":visible")) {
      $('#contac, #titl').val('');
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<button type="button" id="addvisit" class="hs-button primary large">Adicionar Visitante</button>

<div id="fechvisit" style="display: none;">
  <div class="row">
    <div class="col-xs-12">
      <div class="form-group">
        <label for="titl"> <strong>NOME VISITANTE</strong></label>
        <select class="js-states form-control" name="titl" id="titl">
          <option></option>
          <option value="teste">teste</option>
          <option value="teste1">teste1</option>
        </select>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-6">
      <div class="form-group">
        <label for="contac"> <strong>CONTACTO VISITANTE</strong></label>
        <input type="text" name="contac" class="form-control" id="contac">
      </div>
    </div>
  </div>
</div>