Hide field in form

Asked

Viewed 53 times

0

I need to create a form, where the options OAB REGISTRATION, SECTION and SUBSECTION appear only if the user selects LAWYER as a profession. There is a predefined list of professions. How do I make this block (fieldsAdv) appear only when LAWYER is selected?

<div class="form-group col-xs-12">
    <label>Profissão<span class="text-danger">*</span></label>
    <select id="listaProfissao" name="Usuario.id_pd_Profissao" class="form-control" required>                       
    <option></option>
    </select>
</div>
<div class="hidden" id="camposAdv">
    <div class="form-group col-xs-12">
        <label>Inscrição OAB<span class="text-danger">*</span></label>
        <input type="text" id="ds_inscricaoOab" name="usuario.ds_inscricaoOab" maxlength="200" class="form-control" value="@ViewBag.UsuarioCad.ds_inscricaoOab" required>
    </div>
    <div class="form-group col-xs-12">
        <label>Seção<span class="text-danger">*</span></label>
        <input type="text" id="ds_secao" name="usuario.ds_secao" maxlength="200" class="form-control" value="@ViewBag.UsuarioCad.ds_secao" required>
    </div>
    <div class="form-group col-xs-12">
        <label>Subseção<span class="text-danger">*</span></label>
        <input type="text" id="ds_subsecao" name="usuario.ds_subsecao" maxlength="200" class="form-control" value="@ViewBag.UsuarioCad.ds_subsecao" required>
    </div>
</div>
javascript form

  • jquery? javascript?

  • Bruno the environment is technical, avoid putting slang, compliments or subjects technically unrelated to the question.

2 answers

0

Create an option for a lawyer.

 <option id="advogado" value="advogado">Advogado</option>

Then take the value of this option and use in Javascript using the IF clause.

 var opAdvogado = document.getElementById("advogado").value;
    
    if(!opAdvogado) {
       document.getElementById("camposAdv").style.display = "none";
    } else {
       document.getElementById("camposAdv").style.display = "block";
    }

0

Pure Javascript

  1. Place the div referring to the lawyer initially hidden with style="display: none;

    <div class="hidden" id="camposAdv" style="display: none;">

  2. In select call a function that fires when selecting an option

    <select ......... onchange="exibir_ocultar(this)">

  3. Create a trigger function by changing the value of select, that is to select an option

function exibir_ocultar(val) {
  if(val.value == 'advogado') {
    document.getElementById('camposAdv').style.display = 'block';
  }
  else {
    document.getElementById('camposAdv').style.display = 'none';
  }
};
<div class="form-group col-xs-12">
        <label>Profissão<span class="text-danger">*</span></label>
        <select id="listaProfissao" name="Usuario.id_pd_Profissao" class="form-control" required onchange="exibir_ocultar(this)">
        <option value="fiscal natureza">fiscal natureza</option>
        <option value="advogado">advogado</option>
        <option value="medico">medico</option>

        </select>
    </div>

    <div class="hidden" id="camposAdv" style="display: none;">
        <div class="form-group col-xs-12">
            <label>Inscrição OAB<span class="text-danger">*</span></label>
            <input type="text" id="ds_inscricaoOab" name="usuario.ds_inscricaoOab" maxlength="200" class="form-control" value="@ViewBag.UsuarioCad.ds_inscricaoOab" required>
        </div>
        <div class="form-group col-xs-12"">
            <label>Seção<span class="text-danger">*</span></label>
            <input type="text" id="ds_secao" name="usuario.ds_secao" maxlength="200" class="form-control" value="@ViewBag.UsuarioCad.ds_secao" required>
        </div>
        <div class="form-group col-xs-12">
            <label>Subseção<span class="text-danger">*</span></label>
            <input type="text" id="ds_subsecao" name="usuario.ds_subsecao" maxlength="200" class="form-control" value="@ViewBag.UsuarioCad.ds_subsecao" required>
        </div>
    </div>

JQUERY

$(document).ready(function(){
    $("#listaProfissao").change(function(){
        $(this).find("option:selected").each(function(){
            var optionValue = $(this).attr("value");
            if(optionValue == "advogado"){
                $(".hidden").show();
            } else{
                $(".hidden").hide();
            }
        });
    }).change();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="form-group col-xs-12">
    <label>Profissão<span class="text-danger">*</span></label>
    <select id="listaProfissao" name="Usuario.id_pd_Profissao" class="form-control" required>
    <option value="fiscal natureza">fiscal natureza</option>
    <option value="advogado">advogado</option>
    <option value="medico">medico</option>

    </select>
</div>

<div class="hidden" id="camposAdv">
    <div class="form-group col-xs-12">
        <label>Inscrição OAB<span class="text-danger">*</span></label>
        <input type="text" id="ds_inscricaoOab" name="usuario.ds_inscricaoOab" maxlength="200" class="form-control" value="@ViewBag.UsuarioCad.ds_inscricaoOab" required>
    </div>
    <div class="form-group col-xs-12"">
        <label>Seção<span class="text-danger">*</span></label>
        <input type="text" id="ds_secao" name="usuario.ds_secao" maxlength="200" class="form-control" value="@ViewBag.UsuarioCad.ds_secao" required>
    </div>
    <div class="form-group col-xs-12">
        <label>Subseção<span class="text-danger">*</span></label>
        <input type="text" id="ds_subsecao" name="usuario.ds_subsecao" maxlength="200" class="form-control" value="@ViewBag.UsuarioCad.ds_subsecao" required>
    </div>
</div>

Browser other questions tagged javascript form

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