How to make the last two fields "teacher" and "enroll" only appear after selecting the option of the above field "Type"?

Asked 7 years, 2 months ago

Viewed 77 times

0

How to make the last two fields "teacher" and "enroll" only appear after selecting the option of the above field "Type" ??

<br/><br/>
Tipo:<b>*</b><br/>
<select id="tipo" name="tipo" required>
  <option value=""></option>
  <option value="Titular">Titular</option>
  <option value="Substituto">Substituto</option>
  <option value="Substituto CTD">Substituto CTD</option>
  <option value="Aula Atividade">Aula Atividade</option>
</select>
<br/><br/>
Professor:<b>*</b><br/>
<input id="nomeProfEfetivo" name="nomeProfEfetivo" required>
</input>
<br/><br/>
Matricula:<b>*</b><br/>
<input id="matricula" name="matricula" required>
</input>
<br/><br/>

Hello Gilberto, see my reply.

– Matheus Miranda

2017/04/17 at 20:56

2 answers

1

You will need javascript with event change and show to show:

$("#tipo").change(function() {
  $('#teste').show();
});

Html:

<div id="teste" hidden>
  Professor:<b>*</b>
  <br/>
  <input id="nomeProfEfetivo" name="nomeProfEfetivo" required>
  <br/>
  <br/> Matricula:
  <b>*</b>
  <br/>
  <input id="matricula" name="matricula" required>
</div>

Jsfiddle: https://jsfiddle.net/a8qvfz6s/2/

Source: http://api.jquery.com/show/ and https://api.jquery.com/change/

0

<html>
    <head>  

        <script type="text/javascript">
        function visible(name) 
            {
                var mydiv =  document.getElementById("d");
                mydiv.style = "show";
            }
        </script>
    </head>
    <body>
        Tipo:<b>*</b><br/>
        <select id="tipo" name="tipo" onchange="visible('d')" required>
            <option value=""></option>
            <option value="Titular">Titular</option>
            <option value="Substituto">Substituto</option>
            <option value="Substituto CTD">Substituto CTD</option>
            <option value="Aula Atividade">Aula Atividade</option>
        </select>

        <div id="d" style="display: none">
            Professor:<b>*</b><br/>
            <input id="nomeProfEfetivo" name="nomeProfEfetivo" required>
            </input><br/>   

            Matricula:<b>*</b><br/>
            <input id="matricula" name="matricula" required>
            </input>    
        </div>
    </body>
</html>

Browser other questions tagged html

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