Como alterar valor de input de um formulário HTML com JavaScript
- Detalhes
- Angelo Luis Ferreira
- JavaScript
- Acessos: 10089
Existem várias maneiras de manipular o valor de entrada de um formulário HTML com JavaScript. Neste tutorial, vamos apresentar 2 maneiras bem simples para alterar o elemento input de um formulário HTML, usando a linguagem de programação JavaScript. O valor do campo input, em todas os exemplos, é alterado quando ocorre um evento JavaScript pela ação de um clique em um botão HTML. Vamos utilizar, portanto, as seguintes estruturas:
Exemplo 1: Alterar o valor de input manipulando diretamente o atributo value.
Exemplo 2: Alterar o valor de input usando o método setAttribute().
1. Alterar o valor de input com JavaScript manipulando diretamente o atributo "value"
1.1. Neste exemplo vamos atribuir diretamente um novo valor ao atributo value do elemento input selecionado:
1.1.1. Formulário HTML:
Vamos criar um formulário HTML contendo o elemento input que queremos alterar:
<form name="formName">
<input type="text" id= "demo" name="form" value="Algum valor">
</form>
1.1.2. Obter o valor do elemento input e armazenar em uma variável com JavaScript:
Para selecionar o conteúdo do elemento input de um formulário HTML, podemos utilizar qualquer um dos métodos nativos do JavaScript, como getElementById() ou querySelector(), ou usando estrutura HTML DOOM forms diretamente. Veja a seguir algumas formas para obter o elemento elemento input de um formulário HTML:
a. Selecionar o elemento input usando o método getElementById(). Por exemplo:
const myInput = document.getElementById('demo')
b. Selecionar o elemento input usando o método querySelector() com seletor id. Por exemplo:
const myInput = document.querySelector("#demo")
c. Selecionar o elemento input usando o método querySelector() com seletor definido pela propriedade name. Por exemplo:
const myInput = document.querySelector('input[name="form"]')
d. Selecionar o elemento input usando a estrutura HTML DOM forms. Neste caso usamos a estrutura document.forms['form name']['input name']. Por exemplo:
const myInput = document.forms['formName']['form']
1.1.2.1. A declaração const cria uma variável cujo o valor é fixo, ou seja, uma constante somente para leitura. Isso não significa que o valor é imutável, apenas que a variável constante não pode ser alterada ou retribuída. Nos exemplos acima, utilizamos a variável myInput para receber o conteúdo do elemento input.
1.1.2.2. Para saber mais sobre como selecionar elementos DOM (elementos HTML, atributos HTML e textos inseridos em um documento HTML) leia o artigo: Manipulando o DOM: como selecionar elementos HTML usando JavaScript.
1.1.3. Definir um novo valor de input atribuindo um valor ao atributo value com JavaScript:
Com o conteúdo do elemento input selecionado e armazenado na variável myInput, podemos agora atribuir um novo valor para o atributo value, usando (.value) diretamente. Por exemplo:
myInput.value = "Novo valor"
1.1.4. Adicionar um evento de mudança ao input:
Para adicionar um evento de mudança ao elemento input, vamos adicionar um botão HTML. Ao clicar no botão HTML, podemos "chamar" a função JavaScript responsável pela mudança do atributo value, usando a propriedade onclick, o seletor id ou o método addEventListener():
a. Chamar a função pela propriedade onclick:
<form>
<input type="text" id="demo" name="form" value="Algum valor">
</form>
<button onclick="setInput()">Clique</button>
<script>
function setInput() {
const myInput = document.querySelector("#demo") // acessa o conteúdo de input
myInput.value = "Novo Valor" // atribui novo valor para value
}
</script>
Veja o resultado do exemplo no Squids Editor: https://squids.com.br/editor/index.php?id=284
b. Chamar a função pelo seletor id:
<form>
<input type="text" id="demo" name="form" value="Algum valor">
</form>
<button id="setInput">Clique</button>
<script>
document.getElementById('setInput').onclick = function() {
const myInput = document.querySelector('input[name="form"]') // acessa o conteúdo de input
myInput.value = "Novo Valor" // atribui novo valor ao value
}
</script>
Veja o resultado do exemplo no Squids Editor: https://squids.com.br/editor/index.php?id=285
c. Chamar a função pelo método addEventListener()
<form>
<input type="text" id="demo" name="form" value="Algum valor">
</form>
<button id="setInput">Clique</button>
<script>
const buttonElement = document.getElementById("setInput") // acessa o conteúdo de button
buttonElement.addEventListener("click", function() {
const myInput = document.querySelector("#demo") // acessa o conteúdo de input
myInput.value = "Novo Valor" // atribui novo valor para value
})
</script>
Veja o resultado do exemplo no Squids Editor: https://squids.com.br/editor/index.php?id=286
1.2. Exemplo prático 1:
1.2.1. Neste exemplo podemos mudar o valor do campo inptut ao clicarmos em qualquer um dos botões.
HTML
<form>
<input type="text" id="value" name="name" value="Clique no botão" readonly>
</form>
<button onclick="input()">Mamão</button>
<button onclick="setInput()">Maracujá</button>
<br/><br/>
<div id="demo"></div>
JavaScript
function setInput() {
const myInput = document.querySelector("#value")
myInput.value = "Maracujá"
document.querySelector('#demo').innerHTML = myInput.value
}
function input() {
const myInput = document.querySelector("#value")
myInput.value = "Mamão"
document.querySelector('#demo').innerHTML = myInput.value
}
Veja o nosso exemplo em ação no Squids Editor: https://squids.com.br/editor/index.php?id=281
2. Alterar o valor de input com JavaScript usando o método setAttribute()
2.1. Vamos utilizar o mesmo exemplo anterior, porém aplicando o método setAttribute() para alterar o valor do atributo value do nosso elemento input. O método setAttribute() adiciona um novo atributo ou modifica o valor de um atributo existente em um elemento específico, que no caso será o elemento input.
2.1.1. Método setAttribute() - Sintaxe:
element.setAttribute(name, value);
2.1.1.1. Onde:
name é o nome do atributo como string.
value é o novo valor desejado do atributo.
2.1.2. Definir um novo valor para value usando o método setAttribute():
Com o conteúdo do elemento input acessado e armazenado na myInput, obtido da mesma forma que o exemplo anterior (exemplo 1), vamos alterar o valor do atributo value usando o método setAttribute() do JavaScript. Por exemplo:
myInput.setAttribute('value','Novo valor')
2.2. Exemplo prático 2:
1.2.1. Este exemplo tem o mesmo resultado do exemplo prático 1, porém a atribuição do novo valor para o atributo value é realizado pelo método setAttribute().
HTML
<form>
<input type="text" id="value" name="name" value="Clique no botão" readonly>
</form>
<button onclick="input()">Mamão</button>
<button onclick="setInput()">Maracujá</button>
<br/><br/>
<div id="demo"></div>
JavaScript
function setInput() {
const myInput = document.querySelector("#value")
myInput.setAttribute('value','Maracujá')
document.querySelector('#demo').innerHTML = myInput.value
}
function input() {
const myInput = document.querySelector("#value")
myInput.setAttribute('value','Mamão')
document.querySelector('#demo').innerHTML = myInput.value
}
Veja o nosso exemplo em ação no Squids Editor: https://squids.com.br/editor/index.php?id=282
Esses são apenas alguns exemplos da manipulação do input HTML com JavaScript. Dependendo do que você precisa fazer, pode haver outras técnicas e métodos que sejam mais adequados.
Documentação Oficial
1. [Método getElementById()] » Sobre o método JavaScript getElementById() - MDN Web Docs.
2. [Método querySelector()] » Sobre o método JavaScript querySelector() - MDN Web Docs.
2. [Método addEventListener()] » Sobre o método JavaScript addEventListener() - MDN Web Docs.
2. [Método setAttribute()] » Sobre o método JavaScript setAtribute() - MDN Web Docs.
Cursos
Aprenda a ser um programador mais do que completo (Pacote Full Stack)
O anúncio abaixo ajuda manter o Portal Visual Dicas