1

Estou criando um código onde ao clicar em determinado link de edição vai esconder um determinado formulário (com dados carregados) e aparecer o formulário para edição destes dados.

No meu código Javascript / jQuery eu tenho uma função para dar foco no input que foi clicado para editar, porém o mesmo não está funcionando.

$( document ).ready(function() {
$("#editarDados").hide();
})

function darfocus(el){
  var id = '';
  id = (el.id);
  id = id.replace("focus-", "");
  $("#editarDados").show("slow");
  $("#valoresDados").hide("slow");
  $(id).focus();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">



    <div class="row" id="valoresDados">
        <div class="col-12 col-sm-12 col-md-12 mt-2 mb-2">
          <a href="#" onclick="darfocus(this)" id="focus-email" class="editar-dados"><i class="fas fa-pen-square"></i></a>
          <strong> Senha:</strong> *******</div>
      <div class="col-12 col-sm-12 col-md-3 float-left mt-2 mb-2">
        <a href="#" onclick="darfocus(this)" id="focus-telefone" class="editar-dados"><i class="fas fa-pen-square"></i></a>
        <strong> Telefone:</strong> (62) 3232-0000
      </div>
      <div class="col-12 col-sm-12 col-md-4 float-left mt-2 mb-2">
        <a href="#" onclick="darfocus(this)" id="focus-telefone2" class="editar-dados"><i class="fas fa-pen-square"></i></a>
        <strong> Celular:</strong> (62) 98199-3558
      </div>
      <div class="col-12 col-sm-12 col-md-5 float-left mt-2 mb-2">
        <a href="#" onclick="darfocus(this)" id="focus-cep" class="editar-dados"><i class="fas fa-pen-square"></i></a>
        <strong> Cep:</strong> 00000-000
      </div>
    </div>
    
    <div class="row" id="editarDados">
        
        <div class="col-12 col-sm-12 col-md-12 float-left mt-2 mb-2">
          <label class="t55" for="senha"><strong>Senha* </strong></label>
          <input type="password" class="t55" name="senha" id="senha" required value="*******">
        </div>
        
        <div class="col-12 col-sm-12 col-md-12 float-left mt-2 mb-2">
          <label class="t85" for="telefone"><strong>Telefone*: </strong></label>
          <input type="text" class="t85" name="telefone" id="telefone" required value="(62) 0000-0000">
        </div>
        
        <div class="col-12 col-sm-12 col-md-12 float-left mt-2 mb-2">
          <label class="t85" for="telefone2"><strong>Celular: </strong></label>
          <input type="text" class="t85" name="telefone2" id="telefone2" required value="(62) 90000-0000">
        </div>
         
        <div class="col-12 col-sm-12 col-md-12 float-left mt-2 mb-2">
          <label class="t55" for="cep"><strong>Cep*: </strong></label>
          <input type="text" class="t55" name="cep" id="cep" required value="00000-000">
        </div>
      
    </div>

1
  • 1
    E se você passar o próprio nome do input que deseja dar foco? onclick="darfocus('#telefone')" Para editar o telefone, por exemplo. Commented 9/05/2019 às 13:53

1 Resposta 1

4

Faltou o # no script

 $('#' + id).focus();

e na senha o id do link esta focus-email e o correto é focus-senha

$( document ).ready(function() {
$("#editarDados").hide();
})

function darfocus(el){
  var id = '';
  id = (el.id);
  id = id.replace("focus-", "");
  $("#editarDados").show("slow");
  $("#valoresDados").hide("slow");
  $('#' + id).focus();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">



    <div class="row" id="valoresDados">
        <div class="col-12 col-sm-12 col-md-12 mt-2 mb-2">
          <a href="#" onclick="darfocus(this)" id="focus-senha" class="editar-dados"><i class="fas fa-pen-square"></i></a>
          <strong> Senha:</strong> *******</div>
      <div class="col-12 col-sm-12 col-md-3 float-left mt-2 mb-2">
        <a href="#" onclick="darfocus(this)" id="focus-telefone" class="editar-dados"><i class="fas fa-pen-square"></i></a>
        <strong> Telefone:</strong> (62) 3232-0000
      </div>
      <div class="col-12 col-sm-12 col-md-4 float-left mt-2 mb-2">
        <a href="#" onclick="darfocus(this)" id="focus-telefone2" class="editar-dados"><i class="fas fa-pen-square"></i></a>
        <strong> Celular:</strong> (62) 98199-3558
      </div>
      <div class="col-12 col-sm-12 col-md-5 float-left mt-2 mb-2">
        <a href="#" onclick="darfocus(this)" id="focus-cep" class="editar-dados"><i class="fas fa-pen-square"></i></a>
        <strong> Cep:</strong> 00000-000
      </div>
    </div>
    
    <div class="row" id="editarDados">
        
        <div class="col-12 col-sm-12 col-md-12 float-left mt-2 mb-2">
          <label class="t55" for="senha"><strong>Senha* </strong></label>
          <input type="password" class="t55" name="senha" id="senha" required value="*******">
        </div>
        
        <div class="col-12 col-sm-12 col-md-12 float-left mt-2 mb-2">
          <label class="t85" for="telefone"><strong>Telefone*: </strong></label>
          <input type="text" class="t85" name="telefone" id="telefone" required value="(62) 0000-0000">
        </div>
        
        <div class="col-12 col-sm-12 col-md-12 float-left mt-2 mb-2">
          <label class="t85" for="telefone2"><strong>Celular: </strong></label>
          <input type="text" class="t85" name="telefone2" id="telefone2" required value="(62) 90000-0000">
        </div>
         
        <div class="col-12 col-sm-12 col-md-12 float-left mt-2 mb-2">
          <label class="t55" for="cep"><strong>Cep*: </strong></label>
          <input type="text" class="t55" name="cep" id="cep" required value="00000-000">
        </div>
      
    </div>

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 .