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
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.You would need to detect if the div is open or closed, and then set the values to of the inputs to nothing.
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.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