Change which "type input" appears

Asked

Viewed 264 times

0

I have a code that makes form with questions and various types of answers("text, radio, check-box") and would like a code with jquery to place in my html that when the person selects text-option shows the input type="text" and hides the input type="radio" and the input type="checkbox" and the same with others, like Google form.

Follows image of how it is currently:

inserir a descrição da imagem aqui

jquery html

  • Enter the source code of what you have already done and remove the image.

  • Hi Thales. You can put your HTML in the question?

  • Adds your HTML, which is easier to answer.

1 answer

0


 $("#tipo_input").on("change", function() {
     var tipo = $(this).val();
     $("span[class^='tipo-']:not(.tipo-"+tipo+")").hide();
     $("span[class='tipo-"+tipo+"']").show();
  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Tipo de campo</label>
<select id="tipo_input">
  <option value=""> Selecione...</option>
  <option value="texto"> Campo de texto</option>
  <option value="radio"> Múltipla escolha</option>
  <option value="check"> Caixas de seleção</option>
</select>
<br>
<br>
<span class='tipo-texto'>
  <label>Campo texto</label>
  <input type="text">
  <br>
  <br>
</span>
<span class='tipo-radio'>
  <label>
    <input type="radio"> Opção radio 1
    <input type="radio"> Opção radio 2
  </label>
  <br>
  <br>
</span>
<span class='tipo-check'>
  <label>
    <input type="checkbox"> Opção check
  </label>
</span>

I don’t know how your HTML is, but you can do something like this:

Note that there are span elements with "type-{type_do_input}" classes involving each type of input, along with their Labels. I use these classes to do the following using Jquery:

What the code does is select span type elements that do not have the "type-{selected type}" class (using the :not selector, see more about it here) and hides them, as well as displaying the span element with the selected class, if this has been hidden previously.

Example link working on Jsfiddle: https://jsfiddle.net/m7dn9Lo4/

Browser other questions tagged jquery html

You are not signed in. Login or sign up in order to post.