Allow Submit to appear only when CERTAIN fields are filled in PHP

Question

I need the DIV with Submit:

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

Only appear when certain fields are filled in. For example:

<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>

I have found posts that answer this doubt, however, this case has some differences.

Depending on the option the user chooses, new options will appear (in this case, new checkboxes.

For example: If in select "-Type Problem -" you are selecting "-Machines -", then it will display another select, in this case with the machine checkbox). I need the "REGISTER" button to appear only when the fields are filled in (detail that the check-box "- Hosts -" will only be invisible, it will still be on the page, so the code will not involve all select, will be for the select "Hosts -" only when it is visible on the display, ie, when the user selects the "Hosts" option in select "Problem Type -").

I hope you have understood my doubt. About anything, I am available. I thank you already.

Answer 1

The first step is to check the visible fields on the screen. Using Jquery you can check whether the item is visible as follows:

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

and to check if your select is selected do the following:

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

}

it is necessary to evaluate which are your fields that will be visible or not and the possibilities to be able to do the validation and display the div . botaonovochamado:

if( $('#tipobroblema').is(':visible') && $("#tipoproblemas option:selected").val() != "" ) {
   $(".botaonovochamado").show();
}

Answer 2

You can make the button immediately invisible, and only show after validating the conditions

Below is an example.

$('#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>