0

Eu preciso que a DIV com o Submit:

<div class="botaonovochamado">
    <input type="submit" name="CODIGO" value="Novo">
</div>

Apareça só quando determinados campos estiverem preenchidos. Como por exemplo:

<select name="tipobroblema" id="tipoproblemas" required>
    <option value="">- Tipo Problema -</option>
    <option value="MAQUINAS - ">Maquina</option>
    <option value="VAZAMENTO">Vazamento</option>
    <option value="AR-CONDICIONADO">Ar Condicionado</option>
    <option value="OUTRO - ">Outro</option>
</select>

<select name="atendente" required id="category">
    <option value="">- Atendente -</option>
    <option value="ATENDETE1">atendente1</option>
    <option value="ATENDETE2">atendente2</option>
    <option value="ATENDETE3">atendente3</option>
    <option value="ATENDETE4">atendente4</option>
    <option value="OUTRO">outro</option>
</select>

Já encontrei posts que respondem essa duvida, porém, esse caso tem algumas diferenças.

Dependendo da opção que o usuário escolher, aparecerá opções novas (no caso, novas caixas de seleção.

Por exemplo: Se no select "- Tipo Problema -" estiver com a seleção "- Maquinas -", então ele irá exibir outro select, no caso, com a caixa de seleção de maquinas). Preciso que o botão "REGISTRAR" apareça somente quando os campos estiverem preenchidos (detalhe que a caixa de seleção "- Maquinas -" estará somente invisível, ela ainda estará na página, por tanto, o código não envolverá todos os select, será para o select "- Maquinas -" apenas quando ele estiver visível no display, ou seja, quando o usuário selecionar a opção "Maquinas" no select "- Tipo Problema -").

Espero que tenham entendido minha duvida. Sobre qualquer coisa, estou a disposição. Agradeço desde já.

2
  • Então o submit só aparece se a opção "Maquina" for selecionada no select "Tipo Problema" é isso?
    – hugocsl
    Commented 23/05/2018 às 12:11
  • Não necessariamente. O submit irá aparecer somente quando todos os campos VISÍVEIS estiverem preenchidos Commented 23/05/2018 às 12:45

2 Respostas 2

1

O primeiro passo é verificar os campos visíveis na tela. Usando Jquery você pode verificar se o item é visível da seguinte forma:

if( $('#tipoproblemas').is(':visible') ) {
// faça alguma coisa
}

e para verificar se seu select está selecionado faça o seguinte:

if($("#tipoproblemas option:selected").val() != "") {

}

é preciso avaliar quais são seus campos que vão ser visíveis ou não e as possibilidades para poder fazer a validação e exibir a div .botaonovochamado:

if( $('#tipobroblema').is(':visible') && $("#tipoproblemas option:selected").val() != "" ) {
   $(".botaonovochamado").show();
}
2
  • Não esta funcionando. Esta dando erro na variável. Pode me ajudar? Commented 29/05/2018 às 10:27
  • Posso sim qual o erro? Commented 30/05/2018 às 13:44
0

Você pode fazer com que logo de cara o botão já venha invisível, e só mostrar depois de validar as condições

Segue abaixo um exemplo.

$('#tipoproblemas').on('change', function(){
   valida()
   maquinas()
})

$('#category').on('change', function(){
   valida()
})

$('#nome').on('keyup', function(){
  valida()
})

function maquinas(){

  if( $('#tipoproblemas').val() == "MAQUINAS - " ){
  
    $('#maquinas').css("display", "block");
    
  }else{
    $('#maquinas').css("display", "none");
  }
}


function valida(  ){
  if( ( $('#tipoproblemas').val() != '' ) && ( $('#category').val() != '' ) && ( $('#nome').val() != "" )  ) {
     $('.botaonovochamado').css('display','block')
  }else{
     $('.botaonovochamado').css('display','none')
  }
}
<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
  
  
<div class="botaonovochamado" style="display: none">
    <input type="submit" name="CODIGO" value="Registrar">
</div>

<select name="tipobroblema" id="tipoproblemas" required>
    <option value="">- Tipo Problema -</option>
    <option value="MAQUINAS - ">Maquina</option>
    <option value="VAZAMENTO">Vazamento</option>
    <option value="AR-CONDICIONADO">Ar Condicionado</option>
    <option value="OUTRO - ">Outro</option>
</select>



<select name="atendente" required id="category">
    <option value="">- Atendente -</option>
    <option value="ATENDETE1">atendente1</option>
    <option value="ATENDETE2">atendente2</option>
    <option value="ATENDETE3">atendente3</option>
    <option value="ATENDETE4">atendente4</option>
    <option value="OUTRO">outro</option>
</select>


<label>Preencha o nome</label>
<input id="nome" >

<select name="maquinas" required id="maquinas" style="display: none">
    <option value="">- Maquinas -</option>
    <option value="maquina1">Maquina 1</option>
    <option value="maquina2">Maquina 2</option>
    <option value="maquina3">Maquina 3</option>
    <option value="maquina4">Maquina 4</option>
    <option value="OUTRO">outro</option>
</select>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .