Autofocus and Required in hidden fields by javascript

Question

Autofocus and Required in hidden fields by javascript

Navigation

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

1

I have a field to select two other fields. When it shows the field situation hides the other div and vice versa, this is working perfectly. I would like to know how I can do to give an autofocus required when the selected field is visible, because, I already tried to put the command direct in the div and it happens that with this I disable the search button because, as the two fields are requesting something written ends not working. Here's my code.

 <!--Script que esconde e mostra Divs-->
        <script type="text/javascript">
            window.onload = function(){
                id('tipo').onchange = function(){
                    if( this.value=="" || this.value=="contrato" || this.value=="cliente" || this.value=="cpf" || this.value=="numero" || this.value=="solicitante" )
                        id('filtro').style.display = 'block';
                    else
                        id('filtro').style.display = 'none';

                    if( this.value=="situacao" )
                        id('seletor').style.display = 'block';
                    else
                        id('seletor').style.display = 'none';
                }
            }
            function id(el){
                return document.getElementById(el);
            }
        </script>
        <!--Fim Script que esconde e mostra Divs-->

        <!--Campo Tipo-->
        <form method="get" action="pesquisas.php">
            <div class="row">
                <div class="col-sm-5">
                    <div class="input-group col-lg-12">
                        <div class="input-group-addon">
                            <span class="glyphicon glyphicon-search"></span>
                        </div>
                        <select required autofocus class="form-control" name="tipo" id="tipo">
                            <option value="">SELECIONAR</option>
                            <option value="situacao">SITUAÇÃO</option>
                            <option value="contrato">CONTRATO</option>
                            <option value="cliente">CLIENTE</option>
                            <option value="cpf">CPF</option>
                            <option value="numero">NÚMERO</option>
                            <option value="solicitante">SOLICITANTE</option>
                        </select></form></div></div>
<!--Fim Campo Tipo-->

<!--Campo Situaçao-->
<div class="col-sm-2 col-lg-4" >
    <select type="text" class="form-control" name="seletor" id="seletor" style="display: none">
        <option value="">SELECIONAR</option>
        <option value="solicitada">SOLICITADA</option>
        <option value="portada">PORTADA</option>
        <option value="cancelada">CANCELADA</option>
        <option value="erro">ERRO</option>
    </select>
</div>
<!--Fim Campo Situaçao-->

<!--Campo de pesquisa escrita-->
<div class="col-sm-2 col-lg-4" >
    <input type="text" class="form-control" name="filtro" id="filtro"></div>
<!--Fim Campo de pesquisa escrita-->

<input type="submit" value="Pesquisar" class="btn btn-primary"><br><br>

javascript html5 div

asked by anonymous 22.05.2018 / 23:07

2 answers

0

I believe you can use focus() and setAttribute("required", "") to make the SITUATION field required and focused when it appears on the screen. Check below:

window.onload = function(){
                id('tipo').onchange = function(){
                    if( this.value=="" || this.value=="contrato" || this.value=="cliente" || this.value=="cpf" || this.value=="numero" || this.value=="solicitante" ) {
                        id('filtro').style.display = 'block';
                        }
                    else {
                        id('filtro').style.display = 'none';
                        }

                    if( this.value=="situacao" ) {
                        id('seletor').style.display = 'block';
                        id('seletor').focus();
                        id('seletor').setAttribute("required", "");
                        }
                    else {
                        id('seletor').style.display = 'none';
                        }
                }
            }
            function id(el){
                return document.getElementById(el);
            }

<form method="get" action="pesquisas.php">
            <div class="row">
                <div class="col-sm-5">
                    <div class="input-group col-lg-12">
                        <div class="input-group-addon">
                            <span class="glyphicon glyphicon-search"></span>
                        </div>
                        <select required autofocus class="form-control" name="tipo" id="tipo">
                            <option value="">SELECIONAR</option>
                            <option value="situacao">SITUAÇÃO</option>
                            <option value="contrato">CONTRATO</option>
                            <option value="cliente">CLIENTE</option>
                            <option value="cpf">CPF</option>
                            <option value="numero">NÚMERO</option>
                            <option value="solicitante">SOLICITANTE</option>
                        </select></form></div></div>

<div class="col-sm-2 col-lg-4" >
    <select type="text" class="form-control" name="seletor" id="seletor" style="display: none">
        <option value="">SELECIONAR</option>
        <option value="solicitada">SOLICITADA</option>
        <option value="portada">PORTADA</option>
        <option value="cancelada">CANCELADA</option>
        <option value="erro">ERRO</option>
    </select>
</div>

<div class="col-sm-2 col-lg-4" >
    <input type="text" class="form-control" name="filtro" id="filtro"></div>

<input type="submit" value="Pesquisar" class="btn btn-primary"><br><br>

22.05.2018 / 23:58

return only your last move of each code Mvc List only available and not occupied rooms

score 1 · Accepted Answer

When the element is visible, set the required attribute to true ; when invisible, set to false .

The autofocus will only work on page load, so use the .focus() method to focus on the element.

I made a small change to the structure of your HTML because the submit was out of form and had div s closed wrong.

See:

window.onload = function(){
   id('tipo').onchange = function(){
      if( this.value=="" || this.value=="contrato" || this.value=="cliente" || this.value=="cpf" || this.value=="numero" || this.value=="solicitante" )
         id('filtro').style.display = 'block',
         id('filtro').required = true,
         id('filtro').focus();
      else
         id('filtro').style.display = 'none',
         id('filtro').required = false;
   
      if( this.value=="situacao" )
         id('seletor').style.display = 'block',
         id('seletor').required = true,
         id('seletor').focus();
      else
         id('seletor').style.display = 'none',
         id('seletor').required = false;
   }
}

function id(el){
   return document.getElementById(el);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">

<form method="get" action="pesquisas.php">
   <div class="row">
      <div class="col-sm-5">
         <div class="input-group col-lg-12">
            <div class="input-group-addon">
               <span class="glyphicon glyphicon-search"></span>
            </div>
            <select required autofocus class="form-control" name="tipo" id="tipo">
               <option value="">SELECIONAR</option>
               <option value="situacao">SITUAÇÃO</option>
               <option value="contrato">CONTRATO</option>
               <option value="cliente">CLIENTE</option>
               <option value="cpf">CPF</option>
               <option value="numero">NÚMERO</option>
               <option value="solicitante">SOLICITANTE</option>
            </select>
         </div>
      </div>
   </div>
   <!--Fim Campo Tipo-->
   
   <!--Campo Situaçao-->
   <div class="col-sm-2 col-lg-4" >
      <select type="text" class="form-control" name="seletor" id="seletor" style="display: none">
         <option value="">SELECIONAR</option>
         <option value="solicitada">SOLICITADA</option>
         <option value="portada">PORTADA</option>
         <option value="cancelada">CANCELADA</option>
         <option value="erro">ERRO</option>
      </select>
   </div>
   <!--Fim Campo Situaçao-->
   
   <!--Campo de pesquisa escrita-->
   <div class="col-sm-2 col-lg-4" >
      <input type="text" class="form-control" name="filtro" id="filtro">
   </div>
   <!--Fim Campo de pesquisa escrita-->
   
   <input type="submit" value="Pesquisar" class="btn btn-primary"><br><br>
</form>

A slightly more optimized form of the script:

window.onload = function(){
   id('tipo').onchange = function(){
      var filtro = id('filtro');
      var seletor = id('seletor');

      if( !this.value || this.value.match(/^(contrato|cliente|cpf|numero|solicitante)$/) )
         filtro.style.display = 'block',
         filtro.required = true,
         filtro.focus();
      else
         filtro.style.display = 'none',
         filtro.required = false;

      if( this.value=="situacao" )
         seletor.style.display = 'block',
         seletor.required = true,
         seletor.focus();
      else
         seletor.style.display = 'none',
         seletor.required = false;
   }
}

function id(el){
   return document.getElementById(el);
}

Using jQuery

$(document).ready(function(){
   $("#tipo").change(function(){
      var filtro = $('#filtro');
      var seletor = $('#seletor');
      
      if( !$(this).val() || $(this).val().match(/^(contrato|cliente|cpf|numero|solicitante)$/) )
         filtro
         .show()
         .attr('required', true)
         .focus();
      else
         filtro
         .hide()
         .attr('required', false);

      if( $(this).val() == "situacao")
         seletor
         .show()
         .attr('required', true)
         .focus();
      else
         seletor
         .hide()
         .attr('required', false);
   });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">

<form method="get" action="pesquisas.php">
   <div class="row">
      <div class="col-sm-5">
         <div class="input-group col-lg-12">
            <div class="input-group-addon">
               <span class="glyphicon glyphicon-search"></span>
            </div>
            <select required autofocus class="form-control" name="tipo" id="tipo">
               <option value="">SELECIONAR</option>
               <option value="situacao">SITUAÇÃO</option>
               <option value="contrato">CONTRATO</option>
               <option value="cliente">CLIENTE</option>
               <option value="cpf">CPF</option>
               <option value="numero">NÚMERO</option>
               <option value="solicitante">SOLICITANTE</option>
            </select>
         </div>
      </div>
   </div>
   <!--Fim Campo Tipo-->
   
   <!--Campo Situaçao-->
   <div class="col-sm-2 col-lg-4" >
      <select type="text" class="form-control" name="seletor" id="seletor" style="display: none">
         <option value="">SELECIONAR</option>
         <option value="solicitada">SOLICITADA</option>
         <option value="portada">PORTADA</option>
         <option value="cancelada">CANCELADA</option>
         <option value="erro">ERRO</option>
      </select>
   </div>
   <!--Fim Campo Situaçao-->
   
   <!--Campo de pesquisa escrita-->
   <div class="col-sm-2 col-lg-4" >
      <input type="text" class="form-control" name="filtro" id="filtro">
   </div>
   <!--Fim Campo de pesquisa escrita-->
   
   <input type="submit" value="Pesquisar" class="btn btn-primary"><br><br>
</form>