Allow the submit to appear only when DEFAULT fields are filled in PHP

Question

Allow the submit to appear only when DEFAULT fields are filled in PHP

Navigation

#1 by (1 votes)
#2 by (0 votes)

0

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 already found posts that answer this question, but this case has some differences.

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

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

I hope you have understood my doubt. About anything, I'm at ease. Thank you in advance.

php javascript html html5 css

asked by anonymous 23.05.2018 / 13:53

2 answers

1

The first step is to check the fields visible on the screen. Using Jquery you can check if 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() != "") {

}

You need to evaluate which fields are going to be visible or not, and the possibilities to be able to validate and display the div.

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

23.05.2018 / 15:33

passing value webapi to select html in angular 2 How to send current screen resolution to PHP (on first upload)?

score 0 · Accepted Answer

You can make the button look invisible immediately, 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>