skip to Main Content

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?

4

Answers


  1. 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>
    Login or Signup to reply.
  2. 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>
    Login or Signup to reply.
  3. 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>
    Login or Signup to reply.
  4. 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>
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search