Ir para conteúdo

Arquivado

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

Dexter Morgan

Alterar campo Input ao selecionar Select

Recommended Posts

Bom dia, preciso de uma forma que ao selecionar uma opção no select altere o placeholder no input:

<select id="evento" name="evento" required>
<option value="">EVENTO</option>

<option value="casamento">CASAMENTO</option>
<option value="aniversario_infantil">ANIVERSÁRIO INFANTIL</option>
<option value="bodas">BODAS</option>
<option value="15_anos">15 ANOS</option>
<option value="corporativo">CORPORATIVO</option>

</select>

<input name="nome" type="text" placeholder="NOMES DO CASAL / ANIVERSARIANTE / EMPRESA" required />

eu coloquei tudo junto porem gostaria de saber se tem como mudar ex:

ao selecionar CASAMENTO; no input mostra NOMES DO CASAL

Compartilhar este post


Link para o post
Compartilhar em outros sites

Bom dia Dexter, você pode fazer isso da seguinte forma:

var selectBox = document.getElementById("ID_select");
var inputBox = document.getElementById("ID_input");
inputBox.setAttribute("placeholder", selectBox.value);

Você irá pegar o seu select e nos values dos options você poe o texto que irá no placeholder ai no script você captura o value e insere no atributo placeholder do input o valor.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Vlw Sergio; deu certo aqui ficou da seguinte forma:

function campoSelect(val){
document.getElementById("nome_evento").placeholder = val;
}
<select id="evento" name="evento" onchange="campoSelect(this.value)" required> ...

<input id="nome_evento" name="nome_evento" type="text" placeholder="SELECIONE O EVENTO" required /> ...

Compartilhar este post


Link para o post
Compartilhar em outros sites

 

Vlw Sergio; deu certo aqui ficou da seguinte forma:

function campoSelect(val){
document.getElementById("nome_evento").placeholder = val;
}
<select id="evento" name="evento" onchange="campoSelect(this.value)" required> ...

<input id="nome_evento" name="nome_evento" type="text" placeholder="SELECIONE O EVENTO" required /> ...

 

 

Perfeito isso mesmo, fico feliz de ter ajudado. abraços! :)

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

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