When selecting an option in the select switch form fields

Question

When selecting an option in the select switch form fields

Navigation

#1 by (2 votes)

2

I am creating the site of an event for a friend, and for the registration form I have the following situation:

<h1>Formulario de Inscrição</h1>
<form name="incrição">
<b>Nome Completo:</b></br> <input type="text" size="100" placeholder="Digite seu nome completo" required></br></br>
<b>Endereço:</b></br> <input type="text" size="100" placeholder="Digite seu endereço - Rua ******** ***** ****** Nº***" required></br></br>
<b>Telefone:</b></br> <input type="text" size="100" placeholder="(DDD) 9XXXX -XXXX" required maxlength="12" >
</br></br>
<b>Incrição para o campeonato de:</b></br>
<select name="Inscrição">
    <option method="post" value="Cosplay" name="Cosplay">Cosplay</option>
    <option method="post" value="Smite" name="Smite">Smite</option>
    <option method="post" value="" name="K-pop">K-Pop</option>
    <option method="post" value="Bey Blade" name="Bey Blade">Bey Blade</option>
    <option method="post" value="Just Dance" name="Just Dance">Just Dance</option>
    <option method="post" value="Quadribol" name="Quadribol">Quadribol Terrestre</option>
    <option method="post" value="Anime Quiz" name="Anime Quiz" value="cosplay">Anime Quiz<option>
    <option method="post" value="Desenho"  name="Desenho" value="cosplay">Competição de Desenho</option>
</select>
</form>

I need that when the "Cosplay" option is selected for example, new inputs appear below the option with new questions, since each application has different requirements ... Ex: Character:

javascript

asked by anonymous 21.06.2015 / 01:43

1 answer

How to get values and play in another class? Android Access denied when updating PIP

score 2 · Answer 1

You'll have to use a bit of css and a bit of js

Notes before you begin

I recommend not using accents in the names and ids attributes, eg change <select name="Inscrição"> by <select name="inscricao">
Do not use more than one value within a <option> , eg change <option method="post" value="Anime Quiz" name="Anime Quiz" value="cosplay"> to <option method="post" value="Anime Quiz">
Do not use the attributes of the options, the name should go inside the select only, eg: change <option method="post" value="Cosplay" name="Cosplay">Cosplay</option> to <option value="Cosplay">Cosplay</option>
Tag <option> should not have method attribute, this attribute is only for tag <form>
In the example below the data- attribute is required to detect the fields that should be displayed.
I recommend using jQuery for ease.

I recommend adding the select option, a complete example follows:

$("#selecionar").change(function() {
    var $this, secao, atual, campos;
  
    campos = $("div[data-name]");
    
    campos.addClass("hide");

    if (this.value !== "") {
        secao = $('option[data-section][value="' + this.value + '"]', this).attr("data-section");
      
        atual = campos.filter("[data-name=" + secao + "]");
      
        if (atual.length !== 0) {
            atual.removeClass("hide");
        }
    }
});

.hide
{
   display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><h1>FormulariodeInscrição</h1><formname="incrição">
    <b>Nome Completo:</b></br> <input type="text" size="100" placeholder="Digite seu nome completo" required></br></br>
    <b>Endereço:</b></br> <input type="text" size="100" placeholder="Digite seu endereço - Rua ******** ***** ****** Nº***" required></br></br>
    <b>Telefone:</b></br> <input type="text" size="100" placeholder="(DDD) 9XXXX -XXXX" required maxlength="12" >
    </br></br>
    <b>Incrição para o campeonato de:</b></br>
    <select name="Inscricao" id="selecionar">
        <option value="">Selecionar...</option>
        <option data-section="cosplay" value="Cosplay">Cosplay</option>
        <option data-section="smite" value="Smite">Smite</option>
        <option data-section="k-pop" value="K-pop">K-Pop</option>
        <option data-section="bey-blade" value="Bey Blade">Bey Blade</option>
        <option data-section="just-dance" value="Just Dance">Just Dance</option>
        <option data-section="quadribol" value="Quadribol">Quadribol Terrestre</option>
        <option data-section="anime-quiz" value="Anime Quiz">Anime Quiz<option>
        <option data-section="desenho" value="Desenho">Competição de Desenho</option>
    </select>

    <div data-name="cosplay" class="hide">
        Campos cosplay: <input type="text" value=""><br>
    </div>

    <div data-name="smite" class="hide">
        Campos smite: <input type="text" value=""><br>
    </div>

    <div data-name="k-pop" class="hide">
        Campos kpop: <input type="text" value=""><br>
    </div>

    <div data-name="bey-blade" class="hide">
        campos bey-blade: <input type="text" value=""><br>
    </div>

    <div data-name="just-dance" class="hide">
        just-dance: <input type="text" value=""><br>
    </div>

    <div data-name="quadribol" class="hide">
        quadribol: <input type="text" value=""><br>
    </div>

    <div data-name="anime-quiz" class="hide">
        anime quiz: <input type="text" value=""><br>
    </div>

    <div data-name="desenho" class="hide">
        desenho: <input type="text" value=""><br>
    </div>
</form>