Button type reset calls a function

Question

I have a web form on which I put a input type="reset", to delete the form data in case the user needs it. The button works and is erasing the data as desired, but I’m having a problem.

I have a select, where depending on the value I select on it, it changes the content, and the select is inside the form. select comes with a default value where no contents appear.

When I click the reset button, it returns the select the default value and the content does not disappear as expected. I will leave an example:

function mostrarConteudo(){
  if(document.getElementById("sel").value == "Nao"){
    document.getElementById("div").style.display = "none";
  }else{
    document.getElementById("div").style.display = "";
  }
}

window.onload = function () {
  mostrarConteudo();
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<form>
  <select id="sel" class="form-control w-100" onchange="mostrarConteudo()">
    <option value"">Nao</option>
    <option value"S">Sim</option>
  </select>
  
  <br>
  
  <div id="div" style="background-color: red; width: 500px;" class="ml-4">Valor da div</div>
  
  <br>
  <br>
  
  <button type="reset">Resetar Form</button>
</form>

Note that when leaving select with the option "yes" and reset, it changes the value to "no", but the div does not disappear.

I tried to put in select one onreset to call the function again but it did not work.

I’ve tried putting a onclick on the button, also did not work.

What can I do to correct this mistake?

EDIT:

Error when I try to pass a parameter, as suggested in Sam’s answer: (in this case, my function is called openOptions())

Answer 1

Places an attribute onclick calling the function and passing any value:

<button type="reset" onclick="mostrarConteudo(this)">Resetar Form</button>

If the value of the parameter passed exists in the function, it means that the reset button has been clicked:

function mostrarConteudo(e){
                    //   ↑----------------------------↓
  if(document.getElementById("sel").value == "Nao" || e){
    document.getElementById("div").style.display = "none";
  }else{
    document.getElementById("div").style.display = "";
  }
}

window.onload = function () {
  mostrarConteudo();
}

<form>
  <select id="sel" class="form-control w-100" onchange="mostrarConteudo()">
    <option value"">Nao</option>
    <option value"S">Sim</option>
  </select>
  
  <br>
  
  <div id="div" style="background-color: red; width: 500px;" class="ml-4">Valor da div</div>
  
  <br>
  <br>
  
  <button type="reset" onclick="mostrarConteudo(this)">Resetar Form</button>
</form>

---

You can also hide the direct element in the onclick, without going through the job:

<button type="reset" onclick="$('#div').hide()">Resetar Form</button>

---

Another way is to create one Event Listener pro button and call the function after a small delay using setTimeout():

function mostrarConteudo(){
  if(document.getElementById("sel").value == "Nao"){
    document.getElementById("div").style.display = "none";
  }else{
    document.getElementById("div").style.display = "";
  }
}

$("[type=reset]").on("click", function(){
   setTimeout(mostrarConteudo, 1);
});

window.onload = function () {
  mostrarConteudo();
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <select id="sel" class="form-control w-100" onchange="mostrarConteudo()">
    <option value"">Nao</option>
    <option value"S">Sim</option>
  </select>
  
  <br>
  
  <div id="div" style="background-color: red; width: 500px;" class="ml-4">Valor da div</div>
  
  <br>
  <br>
  
  <button type="reset">Resetar Form</button>
</form>

Answer 2

Good afternoon,

Change the HTML select so that the values are for example 1 and 2 and the type reset button puts type button and with an onclick to call the resetForm function()

Options within the select:

<option value"1">Nao</option>
<option value"2">Sim</option>

Reset button:

<button type="button" onclick="resetForm()">Resetar Form</button>

Then on the JS in the decision structure of the function show:

if(document.getElementById("sel").value == 1){
    document.getElementById("div").style.display = "none";
}else{
    document.getElementById("div").style.display = "";
}

This is a new function to reset the folder:

function resetForm(){
    document.getElementById('sel').value = 1;
    document.getElementById("div").style.display = "none";
}

This should solve your problem

Answer 3

It is easy to... js does not call the function "showConducer" again because it is only called each time it Reload on the page. That is the problem is that the function is not called after.