1
I am creating a code where clicking on an edit link will hide a particular form (with data loaded) and appear the form for editing this data.
In my Javascript code / jQuery I have a function to focus on the input that was clicked to edit, but the same is not working.
$( 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>
And if you pass the name of the input you want to focus on?
onclick="darfocus('#telefone')"To edit your phone, for example.– Rodrigo Tognin