How do I open and hide fields on a form by check on button radio?

Question

How do I open and hide fields on a form by check on button radio?

Navigation

#1 by (1 votes)
#2 by (1 votes)
#3 by (1 votes)
#4 by (0 votes)

1

I have a form and in it I have two radio fields that, depending on the choice, should open other fields to fill. Thanks

php javascript jquery ajax

asked by anonymous 04.03.2015 / 15:27

4 answers

Reset pointer address after being incremented several times Empty field check and zero value

score 1 · Answer 1

1

Use a $.change event to detect the chosen option and change the visibility of the other field with $.show or $.hide .

Example: link

04.03.2015 / 15:43

score 1 · Answer 2

1

you could also use display: none and display: block in css

04.03.2015 / 15:44

score 1 · Answer 3

Here's a more general implementation.

You can use n input:radio to display n contents.

//consultando os radio responsaveis por exibir os conteudos.
var tabs = document.querySelectorAll("[data-tab]");

//consultando os conteudos a serem exibidos.
var contents = document.querySelectorAll("[data-content]");

//declarando a função que será associada a cada input:radio
var tabOnClick = function (elem) {  
  for (var indice in contents) {
    //verificando se o input:radio selecionado está associado ao conteudo atual.
    var display = contents[indice].id == elem.target.dataset.tab ? "block" : "none";
    contents[indice].style.display = display;
  }
}

//associando todos os input:radio ao método declarado acima.
for (var indice in tabs) {
    tabs[indice].onclick = tabOnClick;
}

<div>
    <input id="label1" type="radio" name="tabs" data-tab="tab1" />
    <input id="label2" type="radio" name="tabs" data-tab="tab2" />
    <input id="label3" type="radio" name="tabs" data-tab="tab3" />
<div>
<div>
    <div id="tab1" data-content="" style="display: none;">
        <p>Lorem ipsum non leo dui pharetra posuere lectus maecenas pulvinar, tristique pretium nulla morbi non convallis tellus nibh urna, fames lacinia curabitur suspendisse quis cubilia quis nostra.</p>
    </div>
    <div id="tab2" data-content="" style="display: none;">
        <p>Lacinia libero eu lacinia mauris orci mauris luctus nulla magna egestas tristique, vitae quisque amet primis sociosqu vivamus donec maecenas sit faucibus non a class dapibus faucibus.</p>
    </div>
    <div id="tab3" data-content="" style="display: none;">
        <p>Metus maecenas a sem ipsum elit lacinia donec, mattis convallis erat donec sollicitudin ligula aliquet, potenti eget risus netus posuere cursus mattis feugiat cubilia rutrum porta ultrices quis commodo ornare sapien vitae.</p>
    </div>
<div>

Note that I used properties of type data- to control the flow of the script. constumo advises this approach rather than using a class.

score 0 · Answer 4

It depends on your dynamics, how you want them to appear, what your business rule is, and everything else. Here's an example:

function ver(elemento){
  if (elemento.checked){
    document.getElementById("div").style.display = "";
  }else{
    document.getElementById("div").style.display = "none";
  }
}
function verCampo(elemento){
  if (elemento.checked){
    document.getElementById("campo").style.display = "";
  }else{
    document.getElementById("campo").style.display = "none";
  }
}

function verPorRadio(elemento){
  switch (elemento){
    case "1" : 
      document.getElementById("div").style.display = "";
      document.getElementById("campo").style.display = "none";
      break;
    case "2" : 
      document.getElementById("div").style.display = "none";
      document.getElementById("campo").style.display = "";
      break;
  }
}

#radio {
  position:fixed;
  z-index:999; 
  right:20%; 
  top:0%;
  border:1px solid #000;
  padding:6px;
}

#check {
  position:fixed;
  z-index:999; 
  right:50%; 
  top:0%;
  border:1px solid #000;
  padding:6px;
}

.campo{
  position:fixed;
  z-index:999; 
  right:40%; 
  top:20%;
  border:1px solid #000;
  padding:6px;
}

<div id="radio">
  teste usando Check Box<br/>
  Ver div <input type="checkbox" onclick="ver(this)">
  Ver campo <input type="checkbox" onclick="verCampo(this)">
</div>

<div id="check">
  teste usando Radio<br/>
  Ver div <input type="radio" name="radio" value="1" onclick="verPorRadio(this.value)">
  Ver campo <input type="radio" name="radio" value="2" onclick="verPorRadio(this.value)">
</div>

<div id="div" class="campo" style="display: none;">teste, testando a div fechada</div>
<input type="text" id="campo" class="campo" style="display: none;">