Formulário JavaScriptDados – Acervo Lima Tutorials

Resumo : neste tutorial, você aprenderá sobre a API JavaScript FormData e como postar o FormData usando a API fetch.

Introdução à API JavaScript FormData

Suponha que você tenha um formulário de inscrição com dois campos: nome e email.

<form id="subscription">
    <h1>Subscribe</h1>
    <div id="message"></div>
    <div class="field">
        <label for="name">Name:</label>
        <input type="text" id="name" name="name" placeholder="Enter your fullname" required />
        <small></small>
    </div>
    <div class="field">
        <label for="email">Email:</label>
        <input type="text" id="email" name="email" placeholder="Enter your email address" required />
        <small></small>
    </div>
    <div class="field">
        <button type="submit" class="full" id="submit">Subscribe</button>
    </div>
</form>Linguagem de código:  JavaScript  ( javascript )

Quando você clica no botão enviar, o navegador da web envia os valores dos campos de nome e e-mail do formulário para o servidor.

Da mesma forma, a FormDatainterface permite construir um conjunto de pares chave/valor representando campos de formulário e seus valores em JavaScript.

Depois de ter um FormDataobjeto, você pode publicá-lo no servidor usando a API fetch . Se quiser enviar o formulário como se fosse uma solicitação GET, você pode passar o FormDataobjeto para o URLSearchParamsconstrutor.

Crie um objeto FormData

O seguinte cria um novo FormDataobjeto a partir de um elemento de formulário HTML:

const formData = new FormData(form);Linguagem de código:  JavaScript  ( javascript )

O script a seguir mostra os valores de um FormDataobjeto:

const btn = document.querySelector('#submit');
const form = document.querySelector('#subscription');


btn.addEventListener('click', (e) => {
    // prevent the form from submitting
    e.preventDefault();

    // show the form values
    const formData = new FormData(form);
    const values = [...formData.entries()];
    console.log(values);
});Linguagem de código:  JavaScript  ( javascript )

Como funciona.

Primeiro, selecione o botão enviar usando o querySelector()método do documentobjeto.
Em seguida, adicione um manipulador de eventos para manipular o evento click do botão enviar.
Em seguida, chame o preventDefault()método do objeto de evento para evitar o envio do formulário.
Depois disso, crie um novo FormDataobjeto a partir do elemento form.
Finalmente, chame o método Entry() do objeto FormData. Como o método Entry() retorna um iterador, você deve usar o operador spread ( ...).

Métodos FormData

O FormDataobjeto possui os seguintes métodos:

método anexar()

O append()método possui duas formas:

FormData.append(name, value)
FormData.append(name, value, file)Linguagem de código:  JavaScript  ( javascript )

O append()método anexa um novo valor a uma chave existente dentro de um FormDataobjeto ou adiciona a chave se ela não existir.

método excluir()

FormData.delete(name);Linguagem de código:  JavaScript  ( javascript )

O delete()método exclui um par chave/valor pelo nome da chave do FormDataobjeto.

método de entradas()

FormData.entries()Linguagem de código:  JavaScript  ( javascript )

O entries()método retorna um iterador de todos os pares chave/valor no FormDataobjeto.

método get()

FormData.get(name)Linguagem de código:  JavaScript  ( javascript )

O get()método retorna o primeiro valor por um nome de chave.

método getAll()

FormData.getAll(name)Linguagem de código:  JavaScript  ( javascript )

O getAll()método retorna uma matriz de todos os valores por um nome de chave.

método has()

FormData.has(name);Linguagem de código:  JavaScript  ( javascript )

O has()método retorna verdadeiro se o objeto FormData contiver um nome de chave.

método chaves()

FormData.keys()Linguagem de código:  JavaScript  ( javascript )

O keys()método retorna um iterador de todas as chaves.

método set()

O método set() possui duas formas:

FormData.set(name, value);
FormData.set(name, value, filename);Linguagem de código:  JavaScript  ( javascript )

O set()método define um novo valor para um nome de chave existente ou adiciona a chave/valor se ainda não existir.

método valores()

FormData.values()Linguagem de código:  JavaScript  ( javascript )

O values()método retorna um iterador de todos os valores no objeto FormData.

Envie o FormData usando a API fetch

Construiremos um formulário de inscrição simples que usa FetchAPI para postar um objeto FormData no servidor.

Veja a seguir como enviar FormDatausando a API fetch:

const btn = document.querySelector('#submit');
const form = document.querySelector('#subscription');
const messageEl = document.querySelector('#message');

btn.addEventListener('click', (e) => {
    e.preventDefault();
    subscribe();
});

const subscribe = async () => {
    try {
        let response = await fetch('subscribe.php', {
        method: 'POST',
        body: new FormData(form),
        });
        const result = await response.json();

        showMessage(result.message, response.status == 200 ? 'success' : 'error');
    } catch (error) {
        showMessage(error.message, 'error');
    }
};

const showMessage = (message, type = 'success') => {
    messageEl.innerHTML = `
        <div class="alert alert-${type}">
        ${message}
        </div>
    `;
};Linguagem de código:  JavaScript  ( javascript )

Neste exemplo, definimos uma função chamada subscribe() e a chamamos no ouvinte de evento click do botão enviar. A subscribe()função é assíncrona porque usa a awaitpalavra-chave.

Dentro da subscribe()função:

Primeiro, poste os dados do formulário no script subscribe.php usando o fetch()método:

let response = await fetch('subscribe.php', {
    method: 'POST',
    body: new FormData(form),
});Linguagem de código:  JavaScript  ( javascript )

Segundo, obtenha a resposta JSON chamando o json()método do responseobjeto:

const result = await response.json();Linguagem de código:  JavaScript  ( javascript )

Terceiro, mostre uma mensagem de sucesso se o código de status HTTP for 200. Caso contrário, exiba uma mensagem de erro. A messagepropriedade de resultarmazena a mensagem de sucesso ou erro.

showMessage(result.message, response.status == 200 ? 'success' : 'error');Linguagem de código:  JavaScript  ( javascript )

Por fim, defina a showMessage()função que exibe uma mensagem de sucesso ou erro:

const showMessage = (message, type = 'success') => {
    messageEl.innerHTML = `
        <div class="alert alert-${type}">
        ${message}
        </div>
    `;
};Linguagem de código:  JavaScript  ( javascript )

Junte tudo.

index.html

<!DOCTYPE html>
<html lang="en">

    <head>
        <title>JavaScript Form Demo</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="css/style.css" />
    </head>

    <body>
        <div class="container">
            <form id="subscription">
                <h1>Subscribe</h1>
                <div id="message"></div>
                <div class="field">
                    <label for="name">Name:</label>
                    <input type="text" id="name" name="name" placeholder="Enter your fullname" required />
                    <small></small>
                </div>
                <div class="field">
                    <label for="email">Email:</label>
                    <input type="text" id="email" name="email" placeholder="Enter your email address" required />
                    <small></small>
                </div>
                <div class="field">
                    <button type="submit" class="full" id="submit">Subscribe</button>
                </div>
            </form>
        </div>
        <script src="js/app.js"></script>
    </body>

</html>Linguagem de código:  JavaScript  ( javascript )

aplicativo.js

const btn = document.querySelector('#submit');
const form = document.querySelector('#subscription');
const messageEl = document.querySelector('#message');

btn.addEventListener('click', (e) => {
    e.preventDefault();
    subscribe();
});

const subscribe = async () => {
    try {
        let response = await fetch('subscribe.php', {
            method: 'POST',
            body: new FormData(form),
        });
        const result = await response.json();

        showMessage(result.message, response.status == 200 ? 'success' : 'error');

    } catch (error) {
        showMessage(error.message, 'error');
    }
};

const showMessage = (message, type = 'success') => {
    messageEl.innerHTML = `
        <div class="alert alert-${type}">
        ${message}
        </div>
    `;
};Linguagem de código:  JavaScript  ( javascript )

Resumo

Use a API JavaScript FormData para capturar os valores do formulário HTML.
Use a API Fetch para enviar FormDataao servidor.

JavaScript IndexadoDB

Arrastar e soltar JavaScript