Locking in field in Div Occult

Question

How to disable a field that is inside a hidden div to not work when sending the form

Example: in this my script below when sending the form is also sent the fields that are hidden, but these fields should only be sent when they are shown

how to fix this?

  function Mudarestado(el) {
        var display = document.getElementById(el).style.display;
        if(display == "block")
            document.getElementById(el).style.display = 'none';
        else
            document.getElementById(el).style.display = 'block';
    }
      
   
      
   

 <form action="teste.php" method="GET">  
 Habilitar
 <input type="checkbox" onclick="Mudarestado('minhaDiv')" class="valores" name="choice" value="200" /><br/>
<br><br>
Campo 1 :<input type="text" name="id" value="Ola" />
         <input type="text" name="id" value="Ola2" />
 <br><br>
 <div id="minhaDiv" style="display: none;">
Campo 2 :<input type="text" name="id" value="Ola" />
         <input type="text" name="id" value="Ola2" />

 </div>
      
      
 <input type="submit" value="Entrar" />
    
 </form>  

Answer 1

Try it like this:

function Mudarestado(el) {
        var display = document.getElementById(el).style.display;
        if(display == "block"){
            document.getElementById(el).style.display = 'none';
            //Desabilita todos os inputs de dentro da div
            $('#minhaDiv :input').attr('disabled', true);
        }
        else{
            document.getElementById(el).style.display = 'block';
            //Habilita todos os inputs de dentro da div
            $('#minhaDiv :input').attr('disabled', false);
        }
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="teste.php" method="GET">  
 Habilitar
 <input type="checkbox" onclick="Mudarestado('minhaDiv')" class="valores" name="choice" value="200" /><br/>
<br><br>
Campo 1 :<input type="text" name="id" value="Ola" />
         <input type="text" name="id" value="Ola2" />
 <br><br>
 <div id="minhaDiv" style="display: none;">
Campo 2 :<input type="text" name="id" value="Ola" disabled />
         <input type="text" name="id" value="Ola2" disabled />

 </div>
      
      
 <input type="submit" value="Entrar" />
    
 </form>

Note that I kept your code pretty much the way it was, I just added two lines, one inside the if to disable the fields in question when unchecking the checkbox and another inside the else to activate the fields when marking the checkbox again. Note: Do not forget to import the library jQuery of JavaScript, as first line of the second code block.

Answer 2

You can go through all the child elements of your div and disable/enable depending on your need.

Below I made an example, with the for() redundant, just to illustrate what I’m talking about.

function Mudarestado(el) {
  var display = document.getElementById(el).style.display;
  var elements = document.getElementById(el).children;
  if (display == "block") {
    document.getElementById(el).style.display = 'none';
    for (i = 0; i < elements.length; i++) {
      elements[i].disabled = true;
      console.log(elements[i]);
    }
  } else {
    document.getElementById(el).style.display = 'block';
    for (i = 0; i < elements.length; i++) {
      elements[i].disabled = false;
      console.log(elements[i]);
    }
  }

}

<form action="teste.php" method="GET">
  Habilitar
  <input type="checkbox" onclick="Mudarestado('minhaDiv')" class="valores" name="choice" value="200" /><br/>
  <br><br> Campo 1 :<input type="text" name="id" value="Ola" />
  <input type="text" name="id" value="Ola2" />
  <br><br>
  <div id="minhaDiv" style="display: none;">
    Campo 2 :<input type="text" name="id" value="Ola" disabled/>
    <input type="text" name="id" value="Ola2" disabled/>
  </div>
  <input type="submit" value="Entrar" />
</form>

See that in var elements = document.getElementById(el).children; I get all the elements that are inside minhaDiv. With that, I didn’t break up if it’s a input or some other element, because I believe you want to disable all. But, you can do such a check if you want to.