Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

silvagno

Chamar um texto ao digitar um valor

Recommended Posts

Boa noite,

 

   Fiz uma caixa de texto e gostaria de saber como faço para chamar um texto ao digitar um valor na input.

Ex: ao digitar 1320 deve aparecer o nome João na outra input.

 

Obrigado!

<tr>
<td>Cod:</tr>
<td>
<input type="text" name="Nomes" size="5"></br></br>
<textarea name="nome pessoal" rows="10" cols="50"></textarea>
</td>
</tr>

 

Capturar.PNG

Compartilhar este post


Link para o post
Compartilhar em outros sites
1 hora atrás, Eziquiel disse:

Veja este outro exemplo utilizando uma lista de nomes com seus respectivos códigos.

Digite um código entre "1320" e "1329" e tecle "Enter".

 

http://codepen.io/Eziquiel/pen/zZLQYJ?editors=0010

Obrigado Eziquiel,

Não consegui fazer ele funcional no navegador, sabe porque?

 

<html>
<body>

<tr>
<td>Cod:</tr>
<td>
<input type="text" name="Nomes" size="5"></br></br>
<textarea name="nome pessoal" rows="10" cols="50"></textarea>
</td>
</tr>

<script>

var dados = [{"codigo": "1320", "Nome": "João"},
             {"codigo": "1321", "Nome": "Maria"},
             {"codigo": "1322", "Nome": "Tiago"},
             {"codigo": "1323", "Nome": "Pedro"},
             {"codigo": "1324", "Nome": "Rosa"},
             {"codigo": "1325", "Nome": "Washington"},
             {"codigo": "1326", "Nome": "Roberta"},
             {"codigo": "1327", "Nome": "Marcos"},
             {"codigo": "1328", "Nome": "Lucas"},
             {"codigo": "1329", "Nome": "Tamirez"}
            ];


$('input[name="Nomes"]').change(function(){
  $('textarea[name="nome pessoal"]').val(pegaNome($(this).val()));
});


function pegaNome(cod){
  var nome = "Não existe na lista"
  $.each(dados, function(i, val){
    if (val.codigo == cod)
      nome = val.Nome;
  });
  return nome;
}
</script>
</body>
</html>
1 hora atrás, Eziquiel disse:

Veja este outro exemplo utilizando uma lista de nomes com seus respectivos códigos.

Digite um código entre "1320" e "1329" e tecle "Enter".

 

http://codepen.io/Eziquiel/pen/zZLQYJ?editors=0010

 

 

1 hora atrás, Eziquiel disse:

 

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Adicione esta linha no seu html dentro da tag "head"

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

 

Compartilhar este post


Link para o post
Compartilhar em outros sites
5 minutos atrás, Eziquiel disse:

Adicione esta linha no seu html dentro da tag "head"

 


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

 

Eziquiel,

 

Ficou muito bom, muito obrigado pela sua ajuda.

Sem querer abusar de sua ajuda, seria possível fazer um botão que ao clicar nele ele copia o nome que esta dentro da input?

Compartilhar este post


Link para o post
Compartilhar em outros sites
1 hora atrás, Eziquiel disse:

Ficou perfeito, teve que fazer algumas alterações, ficou bonito o codigo.

Como posso colocar uma quebra de linha?

 

Notei que '\n' significa quebra de linha, porem não esta quebrando no meu caso.

 

<script>
var dados = [{"codigo": "1320", "Nome": ["João","Pedro","Jose","Rosa"]},
             {"codigo": "1321", "Nome": ["Maria"]}, 
			 {"codigo": "1322", "Nome": ["Tiago"]},
			 {"codigo": "1323", "Nome": ["Jose"]},
			 {"codigo": "1324", "Nome": ["Jorge"]},
			 {"codigo": "1325", "Nome": ["Karol"]}
			];

$('input[name="Nomes"]').change(function(){
   $('textarea[name="nome pessoal"]').val(pegaNome($(this).val()));
   });
   
   function pegaNome(cod){
  var nome = "Não existe na lista"
 <!-- $.each(dados, function(i, val){--->
  var nomes = "";
    $.each(dados, function(i, val){
	if (val.codigo == cod)
	{
      nome = val.Nome;
	  $.each(nome, function(index, value){
	  nomes += value + '\n';
  });
  }
  });
  return nome;
}
</script>

 

Capturar.PNG

Compartilhar este post


Link para o post
Compartilhar em outros sites

Eziquiel,

Criei uma input com o nome cliente e a ideai é ao preencher o nome do cleinte ele subistitua no textarea onde consta (NOME CLIENTE / RESPONSÁVEL) pelo nome que foi digitado no input, o codigo 1320 serve para chamar um aviso padrão.Pode ajudar por favor?

 

Capturar.PNG

Compartilhar este post


Link para o post
Compartilhar em outros sites
1 hora atrás, Eziquiel disse:

Veja se é isto?

(Eu mudei os nomes dos inputs. Se atente a isso quando for reutilizar o código.)

 

http://codepen.io/Eziquiel/pen/zZLQYJ?editors=0010

É isso mesmo, ficou muito bom.

outro detalhe, como um mesmo codigo tem mais de uma AVISO PADRÃO, seria possiivel alterar nos demais avisos?

tentei um replaceAll mais não deu certo.

Ex: todo aviso que tenha (NOME CLIENTE / RESPONSÁVEL) substituir peleo nome.

 

Capturar.PNG

Compartilhar este post


Link para o post
Compartilhar em outros sites

Aí está!

 

http://codepen.io/Eziquiel/pen/zZLQYJ?editors=0010

 

Note que há uma função para o replaceAll criada no final do código javascript.

String.prototype.replaceAll = function(searchStr, replaceStr) {
    var str = this;
    searchStr = searchStr.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');
    return str.replace(new RegExp(searchStr, 'gi'), replaceStr);
};

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Oi Eziquiel,

 

   Funciona na perfeição, obrigado.

 

  Fiz mais dois campos onde tenho uma quantidade de X para a matricula do cleinte e outro campo para o telefone do cliente,

acontece que ao digitar o numero ele aparece nos dois campo, então gostaria de saber se é possivel limitar a quandidade de caractres do primeiro campo para não dar conflito com o outro ou fazer com que a ferramenta entenda isso.

 

Desde já agradeço.

 

 

 

 

 

Capturar.PNG

Capturar.PNG

Compartilhar este post


Link para o post
Compartilhar em outros sites

No primeiro use assim:

$('textarea[name="nome pessoal"]').val(text.replaceAll(' XXXXXX ',` ${nome} `));

No segundo use assim:

$('textarea[name="nome pessoal"]').val(text.replaceAll(' XXXXXXXX ',` ${nome} `));

(Lembrando que deve haver um espaço antes de depois de "XXXXXX", senão não irá funcionar)

Compartilhar este post


Link para o post
Compartilhar em outros sites
50 minutos atrás, Eziquiel disse:

No primeiro use assim:


$('textarea[name="nome pessoal"]').val(text.replaceAll(' XXXXXX ',` ${nome} `));

No segundo use assim:


$('textarea[name="nome pessoal"]').val(text.replaceAll(' XXXXXXXX ',` ${nome} `));

(Lembrando que deve haver um espaço antes de depois de "XXXXXX", senão não irá funcionar)

Oi,

   Testei e ficou muito bom, mais parece que deixou de funcionar no Explorer 11 ao mdificar essas linhas

Compartilhar este post


Link para o post
Compartilhar em outros sites

Tenta usar assim:

$('textarea[name="nome pessoal"]').val(text.replaceAll(' XXXXXX ',' '+nome+' '));

e assim:

$('textarea[name="nome pessoal"]').val(text.replaceAll(' XXXXXXXX ',' '+nome+' '));

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

  • Conteúdo Similar

    • Por juliosonic
      Boa noite..
      Estou desenvolvendo um site de https://www.maithunatantra.com.br/ e estou com um duvida sobre o menu de navegação da versão mobile.
      O menu que tem o dropdown "Terapeutas" e "Terapias" quando clico em cima ele expande como deve ser, mas quando clico denovo para recolher os submenus
      nao acontece nada.. segue o trecho do codigo do menu..
      <div class="collapse navbar-collapse" id="navbarsExample09">             <ul class="navbar-nav ml-auto">               <li class="nav-item  active"><a class="nav-link" href="index.html">Home</a></li>               <li class="nav-item  active"><a class="nav-link" href="about-us.html">Quem Somos</a></li>               <li class="nav-item dropdown1">                     <a class="nav-link dropdown-toggle" data-toggle="dropdown1" href="#">Terapeutas</a>                     <ul class="dropdown-menu">                         <li><a class="dropdown-item" href="terapeuta-julio-cezar.html">Julio Cezar</a></li>                         <li><a class="dropdown-item" href="terapeuta-pamela-priscila.html">Pamela Priscila</a></li>                     </ul>                                    </li>               <li class="nav-item dropdown">                     <a class="nav-link dropdown-toggle" data-toggle="dropdown1" href="#">Terapias</a>                     <ul class="dropdown-menu" aria-labelledby="dropdown01">                         <li><a class="dropdown-item" href="o-que-e-reiki.html">O que é Reiki</a></li>                         <li><a class="dropdown-item" href="beneficios-reiki.html">Benefícios do Reiki</a></li>                         <li><a class="dropdown-item" href="principios-reiki.html">Princípios do Reiki</a></li>                         <li><a class="dropdown-item" href="animais-reiki.html">Reiki em Animais</a></li>                         <li><a class="dropdown-item" href="animais-reiki.html">Estudos Sobre Reiki</a></li>                         <li><a class="dropdown-item" href="terapia-massagem-tantrica.html">Terapia Tântrica</a></li>                     </ul>               </li>               <li class="nav-item  active"><a class="nav-link" href="blog.html">Blog</a></li>                <li class="nav-item"><a class="nav-link" href="contato.html">Contato</a></li>             </ul>         </div>  
      Massagem Tantrica em Curitiba
      Tantra Curitiba
      Massagem Tântrica
      Tantra
      Julio Darshan

      Obrigado
      Att
      Julio Cezar
       
       
       
    • Por joeythai
      Boa tarde pessoal,
       
      Eu criei um formulário em que tenho 3 interações: evento click, change e uma chamada ajax. No evento on change ("select#removal_table_from" )eu faço uma chamada ajax onde eu passo como parametro o id do item selecionado e construo uma tabela dinamica com o próprio javascript, após isto, tenho um input em que o usuario coloca um valor de percentual para que eu possa preencher em 3 colunas da tabela que foi criada dinamicamente: moto_atualizado, carro_atualizado e caminhao_atualizado, até aí tudo bem, o codigo está fazendo isso, porém, como a tabela é criada dinamicamente eu preciso de alguma forma enviar o arrayData para meu backend mas quando faço o calculo dentro do loop apos resposta do meu ajax, os valores desses 3 campos chegam como null, não sei se é possível fazer o que pretendo ou se é ainda não sei como faz
       
      <code>
           $(document).ready(function (event) {   let arrayData = []; let percentage; let removal_vehicle; let removal_motorcycle; let removal_tuck; let apply_removal = $('#apply_removal');   // apply_removal.on('click', function () { // percentage = $('#percentage').val();   // $('.table-body tr').each(function () {   // let veiculo = $(this).find('.veiculo').text(); // let moto = $(this).find('.moto').text(); // let caminhao = $(this).find('.caminhao').text();   // let removal_vehicle = parseFloat(veiculo) + (parseFloat(veiculo) * parseFloat(percentage)) / 100; // let removal_motorcycle = parseFloat(moto) + (parseFloat(moto) * parseFloat(percentage)) / 100; // let removal_tuck = parseFloat(caminhao) + (parseFloat(caminhao) * parseFloat(percentage)) / 100;   // arrayData.push({ // removal_vehicle, // removal_motorcycle, // removal_tuck // })   // $(this).find('.veiculo_atualizado').val(removal_vehicle.toFixed(2)); // $(this).find('.moto_atualizado').val(removal_motorcycle.toFixed(2)); // $(this).find('.caminhao_atualizado').val(removal_tuck.toFixed(2)); // }); // });   apply_removal.on('click', function () { percentage = $('#percentage').val();   $('.table-body tr').each(function () {   let veiculo = $(this).find('.veiculo').text(); let moto = $(this).find('.moto').text(); let caminhao = $(this).find('.caminhao').text();   removal_vehicle = parseFloat(veiculo) + (parseFloat(veiculo) * parseFloat(percentage)) / 100; removal_motorcycle = parseFloat(moto) + (parseFloat(moto) * parseFloat(percentage)) / 100; removal_tuck = parseFloat(caminhao) + (parseFloat(caminhao) * parseFloat(percentage)) / 100;   arrayData.push({ removal_vehicle, removal_motorcycle, removal_tuck })   $(this).find('.veiculo_atualizado').val(removal_vehicle.toFixed(2)); $(this).find('.moto_atualizado').val(removal_motorcycle.toFixed(2)); $(this).find('.caminhao_atualizado').val(removal_tuck.toFixed(2));     console.log('Removal Vehicle:', removal_vehicle); console.log('Removal Motorcycle:', removal_motorcycle); console.log('Removal Truck:', removal_tuck); }); });   $('select#removal_table_from').on('change', function (e) { let table_id = $(this).val(); let action = route('removal.removal-values.show', table_id);   $.ajax({ type: "GET", url: action, headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },   success: function (data) { $('.table-body').empty();   for (let i = 0; i < data.length; i++) { let carro = parseFloat(data[i].CARRO); let moto = parseFloat(data[i].MOTO); let caminhao = parseFloat(data[i].CAMINHAO); let distancia = data[i].DISTANCIA; let origem = data[i].ORIGEM; let destino = data[i].DESTINO; let localidadeOrigem = data[i].LocalidadeOrigem_ID; let localidadeDestino = data[i].LocalidadeDestino_ID;   let newRow = '<tr class="removal-row">' + '<td class="align-middle">' + '<div class="row">' + '<div class="col-1">' + '<span class="font-weight-bold">Origem</span><br>' + '<span class="origem">' + origem + '</span>' + '</div>' + '<div class="col-1">' + '<span class="font-weight-bold">Destino</span><br>' + '<span class="destino">' + destino + '</span>' + '</div>' + '<div class="col-1">' + '<span class="font-weight-bold">KM</span><br>' + '<span class="km">' + distancia + '</span>' + '</div>' + '<div class="col-1">' + '<span class="font-weight-bold">Veículo</span><br>' + '<span class="veiculo">' + carro + '</span>' + '</div>' + '<div class="col-2">' + '<span class="font-weight-bold">Veículo Atualizado</span><br>' + '<input type="text" class="veiculo_atualizado">' + '</div>' + '<div class="col-1">' + '<span class="font-weight-bold">Moto</span><br>' + '<span class="moto">' + moto + '</span>' + '</div>' + '<div class="col-2">' + '<span class="font-weight-bold">Moto Atualizado</span><br>' + '<input type="text" class="moto_atualizado">' + '</div>' + '<div class="col-1">' + '<span class="font-weight-bold">Caminhão</span><br>' + '<span class="caminhao">' + caminhao + '</span>' + '</div>' + '<div class="col-2">' + '<span class="font-weight-bold">Caminhão Atualizado</span><br>' + '<input type="text" class="caminhao_atualizado">' + '</div>' + '</div>' + '</div>' + '</td>' + '</tr>';   $('.table-body').append(newRow); //let row = $('.removal-row:last');   // Calcula o valor atualizado e define nos campos diretamente // let veiculo_atualizado = carro + (carro * percentage) / 100; // let moto_atualizado = moto + (moto * percentage) / 100; // let caminhao_atualizado = caminhao + (caminhao * percentage) / 100; // console.log('PORCENTS: ', percentage); //console.log('Veiculo Atualizado:', veiculo_atualizado, 'Moto Atualizado:', moto_atualizado, 'Caminhao Atualizado:', caminhao_atualizado);   // Define os valores diretamente nos campos da nova linha // row.find('.veiculo_atualizado').val(veiculo_atualizado.toFixed(2)); // row.find('.moto_atualizado').val(moto_atualizado.toFixed(2)); // row.find('.caminhao_atualizado').val(caminhao_atualizado.toFixed(2));   arrayData.push({ carro, moto, caminhao, distancia, origem, destino, localidadeOrigem, localidadeDestino, removal_vehicle, removal_motorcycle, removal_tuck }); }   $('#copy_data_table').val(JSON.stringify(arrayData)); }   }); });   //javascript para o formulario de cadastro // $(document).ready(function (event) { $('#uf').change(function () { let code_city = $(this).val(); let deposit = localStorage.getItem('selected_deposit_id'); let action = route('removal.removal-values.cities', code_city); $.ajax({ type: "POST", url: action, headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') }, data: { code_city: code_city },   success: function (data) {   $('#city').empty(); $('#deposit').empty();   for (let i = 0; i < data.cities.length; i++) { $('#city').append('<option value="' + data.cities[i].NM + '">' + data.cities[i].NM + '<option>'); }   if (data.deposits.length > 0) { for (let i = 0; i < data.deposits.length; i++) { $('#deposit').append('<option value="' + data.deposits[i].NM + '">' + data.deposits[i].NM + '<option>'); } } else { // $('#deposit').prop('disabled', true); // $('#city').prop('disabled', false); }   $('#city').trigger('change'); } });   });   $('#deposit').on('change', function () { depositId = $(this).val(); localStorage.setItem('selected_deposit_id', depositId); });   $('#uf_destiny').change(function () { let code_city = $(this).val(); let depositDestiny = localStorage.getItem('selected_deposit_destiny_id'); let action = route('removal.removal-values.cities', code_city); $.ajax({ type: "POST", url: action, headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') }, data: { code_city: code_city },   success: function (data) {   $('#city_destiny').empty(); $('#deposit_destiny').empty();   for (let i = 0; i < data.cities.length; i++) { $('#city_destiny').append('<option value="' + data.cities[i].NM + '">' + data.cities[i].NM + '</option>'); }   if (data.deposits.length > 0) { // $('#deposit_destiny').prop('disabled', false); //$('#city_destiny').empty(); // $('#city_destiny').prop('disabled', true); for (let i = 0; i < data.deposits.length; i++) { $('#deposit_destiny').append('<option value="' + data.deposits[i].NM + '">' + data.deposits[i].NM + '</option>'); } } else { // $('#deposit_destiny').prop('disabled', true); // $('#city_destiny').prop('disabled', false); }   $('#city_destiny').trigger('change'); } }); });   $('#deposit_destiny').on('change', function () { let depositDestinyId = $(this).val(); localStorage.setItem('selected_deposit_destiny_id', depositDestinyId); });   }); </code>
    • Por babylon
      Olá galera tudo bem?
      Deixa eu perguntar, estava mexendo no meu site e queria adicionar em html essa tabela porem esta dando erro pois fica assim:
       

      Porem gostaria que ficasse assim:

      Segue o código da tabela:
      <center><table border="0">
          <tr>
      <td bgcolor="#0092df" width="24%"><a href="/categorias?ename=smartphones"><span style="font-size: 20px; color: #ffffff;"><b> <font color="#0092df">..</font>Bicicleta<br> <font color="#0092df">..</font>Track Bikes<br> <font color="#0092df">..</font>Aro 29 TKS</b></a></span><br><br><font size="5"><center><span style="background-color: #A1CD44">DE:</span></font> <br><font size="5"><s>R$ 1.999,99</center></font></s> </td><td><p><a href="/categorias?ename=smartphones"><img src="/static/img/itembicicleta.jpg"><br><font size="5"><center><span style="background-color: #A1CD44">COM - 60%:</span></font> <br><font size="5">1.199,99</font></center></a></td>
             <td><font color="#ffffff">....</font></td>
              <td bgcolor="#0092df" width="24%"><a href="/categorias?ename=smartphones"><span style="font-size: 20px; color: #ffffff;"><b> <font color="#0092df">..</font>Monitor 24"<br> <font color="#0092df">..</font>Samsung<font color="#0092df">aa.aa</font><br> <font color="#0092df">..</font>1ms 144hz</b></a></span></center></td><td><p><a href="/categorias?ename=smartphones"><img src="/static/img/itemmonitor.jpg"></a></td>
          </tr>
          </table></center>
      O que estaria errado, pois não sei como colocar nessa tabela outro fundo de outra cor, veja que usei td bgcolor="#0092df" para o azul escuro mas não sei como usaria pro "#e4f1fb" para o fundo ficar de azul claro em baixo bem como não ficou correto em altura o "DE:" com o "COM - 60%:".
      Bom é isso, obg.


    • Por Alessandro Bodão
      Fala galerinha, 
       
      Tenho um container com um título (h1) no cabeçalho do meu site, esse container ocupa metade da tela (50vw), e eu gostaria que esse título ocupasse toda a largura desse container, independente do seu tamanho ou do tamanho do monitor, de forma com que a palavra tenha exactamente o mesmo tamanho do container (vou anexar uma foto de exemplo). Já tentei todos os valores pra essa h1, como % e vw... mas nada parece fazer sentido.
       
       

    • Por JoaoSilva75
      ola pessoal
       
      procuro um bom programador  de php e javascript para orçamento de um projeto inicial depois tenho outras idéias que gostaria de executar também
       
      gostaria de encontrar alguém de Porto Alegre RS mas estudo a possibilidade de negociar com alguém de outro estado de acordo com o orçamento
       
       
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.