Catching Field in Hidden Div

Question

Catching Field in Hidden Div

Navigation

#1 by (2 votes)
#2 by (2 votes)

1

How to disable a field that is inside a hidden div so it does not work on submitting the form

Exemp: In this script, when I submit the form, the fields that are hidden are sent, but this field 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>

javascript

asked by anonymous 01.08.2017 / 19:55

2 answers

2

Try 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><formaction="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 as it was, I just added two rows, one inside the if to disable the fields in question when unchecking the checkbox and another within the else to activate the fields when marking the checkbox again. Note: Do not forget to import the library jQuery of JavaScript , according to the first line of the second block of code.

01.08.2017 / 20:18

How does "restore" and "save" methods work? Is there a way to remove time out? PHP

score 2 · Accepted Answer

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

Below I've made an example, with for() redundant, just to exemplify 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>

I see that in var elements = document.getElementById(el).children; I get all the elements that are within minhaDiv . With this, I did not split if it is a input or some other element, because I believe you want to disable all. But, you can do this if you want.