Jquery - Clear fields when closing div

Anonimo
July 12, 2023
112 views
4 votes
4 Answers

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?

Answers

You can write a callback function on slideToggle() and check whether the clicked element is visible or not with :visible Selector . If not visible, then clear the selected value.

$('#addvisit').on('click', function(e) {
  e.stopImmediatePropagation();
  $('#fechvisit').slideToggle('slow', function() {
    if (!$(this).is(':visible')) {
      $("#titl, #contac").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>

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>

slideToggle can have a completion function, so we just need to track the state of the div being opened or not. When it’s opened up, we can just clear out the fields.

const fetchVisit = $('#fechvisit');
let isOpen = false;

$('#addvisit').on('click', function(e) {
  e.stopImmediatePropagation();
  
  fetchVisit.slideToggle('slow', function(){
    isOpen = !isOpen;
    
    if(!isOpen){
      //clear out the values after opening
      fetchVisit.find('input, select').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>

To clear the fields when closing the div, you can add a function to clear the values of the select and input fields before sliding up the div

$('#addvisit').on('click', function(e) {
  e.stopImmediatePropagation();
  if (!$('#fechvisit').is(':visible')) {
    clearFields();
  }
  $('#fechvisit').slideToggle('slow');
});
function clearFields() {
  $('#titl').val('');
  $('#contac').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>

Please signup or login to give your own answer.

Click here to cancel reply.

Jquery – Clear fields when closing div

Answers