Como alterar valor de input de um formulário HTML com JavaScript

Por: Angelo Luis Ferreira | 31/01/2023 Acessos: 8.949

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>

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.