Fill in a text field with information from another field by clicking on a radio button

Asked

Viewed 196 times

1

How I would make for the text typed in the field below:

<label for="nomeUsuario">Coordenador:</label>
<input type="text" class="form-control" name="NomeUsuario" id="nomeUsuario">

By clicking on the radio button:

<label>Selecione o coordenador:</label>
<input type="radio" name="Coordenador" value="">

Automatically appear the user name previously typed in the field below?

<label for="nomeCoordenador">Coordenador:</label>
<input type="text" class="form-control" name="NomeCoordenador" id="nomeCoordenador">
javascript jquery

3 answers

2

Guy here has a very simple example, just you take the value of one field and put in the other with the click on the radio. You have to do an eventLiestener on check, which when it is clicked performs the function that will take the value of one field and change the value of the other.

That’s basically it on the radio click

var eu = nomeUsuario.value;
nomeCoordenador.value = eu;

To better understand see below the working example

let nomeUsuario = document.getElementById('nomeUsuario');
let Coordenador = document.querySelector('[name="Coordenador"]');
let nomeCoordenador = document.getElementById('nomeCoordenador');

function mostra() {
    var eu = nomeUsuario.value;
    nomeCoordenador.value = eu;
}

Coordenador.addEventListener('click', mostra);
<label for="nomeUsuario">Coordenador:</label><br>
<input type="text" class="form-control" name="NomeUsuario" id="nomeUsuario"><br>
Ao clicar no radio button:<br>

<label>Selecione o coordenador:</label><br>
<input type="radio" name="Coordenador" value=""><br>
Aparecesse automaticamente o nome do usuário digitado anteriormente no campo abaixo:<br>

<label for="nomeCoordenador">Coordenador:</label><br>
<input type="text" class="form-control" name="NomeCoordenador" id="nomeCoordenador"><br>

2

A simple form with jQuery, which only checks the radiobutton and adds the name in the other field if the first field has any thing typed:

$("[name=Coordenador]").on("click", function(){
   var nu = $("#nomeUsuario").val().trim();
   nu ? $("#nomeCoordenador").val(nu) : this.checked = false;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="nomeUsuario">Coordenador:</label>
<input type="text" class="form-control" name="NomeUsuario" id="nomeUsuario">
<br><br>
<label>Selecione o coordenador:</label>
<input type="radio" name="Coordenador" value="">
<br><br>
<label for="nomeCoordenador">Coordenador:</label>
<input type="text" class="form-control" name="NomeCoordenador" id="nomeCoordenador">

A pure Javascript version for the same thing:

document.querySelector("[name=Coordenador]").onclick = function(){
   var nu = document.getElementById("nomeUsuario").value.trim();
   nu ? document.getElementById("nomeCoordenador").value = nu : this.checked = false;
}
<label for="nomeUsuario">Coordenador:</label>
<input type="text" class="form-control" name="NomeUsuario" id="nomeUsuario">
<br><br>
<label>Selecione o coordenador:</label>
<input type="radio" name="Coordenador" value="">
<br><br>
<label for="nomeCoordenador">Coordenador:</label>
<input type="text" class="form-control" name="NomeCoordenador" id="nomeCoordenador">

The .trim() is to remove possible blank spaces typed in input start and/or end. If you consider this unnecessary, it is only remove the .trim() of the code.

1

It’s quite simple to look at the code below.

function selecioneCoordenador()
{
    var nomeUsuario = window.document.querySelector("#nomeUsuario");
    var selecionar = window.document.querySelector("#selecionar");
    var nomeCoordenador = window.document.querySelector("#nomeCoordenador");

    selecionar.addEventListener("input", function ()
    {
        nomeCoordenador.value = nomeUsuario.value;
    });
}

window.addEventListener("load", selecioneCoordenador);
<!doctype html>
<html lang="pt-br">
<head>
    <meta charset="utf-8">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <script src="js/script.js"></script>
</head>
<body>

    <label for="nomeUsuario">Coordenador:</label>
    <input type="text" class="form-control" name="NomeUsuario" id="nomeUsuario">
    <br/>
    <label>Selecione o coordenador:</label>
    <input id="selecionar" type="radio" name="Coordenador" value="">

    <label for="nomeCoordenador">Coordenador:</label>
    <input type="text" class="form-control" name="NomeCoordenador" id="nomeCoordenador">

</body>
</html>

In his HTML I just put a id="selecionar". Already in the Javascript created a function selecioneCoordenador() that will be called when the page is loaded, within that function I declared 3 variables with values referring to the id in the HTML, then just added an event input in the selecionar which is the input="radio" and when this event occurs the value of nomeCoordenador which is the input="text" with id="nomeCoordenador" will receive the value of nomeUsuario which is the input="text" with id="nomeUsuario".

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.