Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

162
Visualizações
How to send form data to API post via JavaScript

I have a form in my project and when it is submitted I need to send the data to an API and receive the response to check if there's an errors

the html

<form id="contactForm" class="w-75 mx-auto">
    <input type="text" class="form-control bg-transparent" placeholder="Name">
    <input type="email" class="form-control bg-transparent my-3" placeholder="E-mail">
    <textarea class="form-control bg-transparent" placeholder="Your Message"></textarea>
    <button type="submit" class="my-3 px-4 py-2 rounded-3">SEND</button>
</form>

the js

$('#contactForm').submit(function (e) {
    e.preventDefault();

});
about 4 years ago · Juan Pablo Isaza
3 Respostas
Responde à pergunta

0

You can use fetch api and the POST method to send data to an api. Since you have not provided how your api works or how the data is to be passed I cannot provide further help, but i can guide you to the correct path.

Read more about fetch api in javascript

(async function () {
    const url = ''; // your api endpoint here
    const res = await fetch(url, { method: 'POST' });
    // res corresponds to the api response;
})();

Since you're using jQuery, you should probably read jQuery post method

about 4 years ago · Juan Pablo Isaza Relatório

0

This should work. Make sure URL for API and web should be the same else you could get cross site error:

<form id="contactForm" class="w-75 mx-auto" action="http://yourAPI.com">
    <input type="text" class="form-control bg-transparent" placeholder="Name">
    <input type="email" class="form-control bg-transparent my-3" placeholder="E-mail">
    <textarea class="form-control bg-transparent" placeholder="Your Message"></textarea>
    <button type="submit" class="my-3 px-4 py-2 rounded-3">SEND</button>
</form>

<script
  src="https://code.jquery.com/jquery-3.6.0.min.js"
  integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
  crossorigin="anonymous"></script>

<script>
    $('#contactForm').submit(function (e) {
        e.preventDefault(); // avoid to execute the actual submit of the form.

        
        var form = $(this);
        var url = form.attr('action');
        
        $.ajax({
            type: "POST",
            url: url,
            data: form.serialize(), // serializes the form's elements.
            success: function(data)
            {
                alert(data); // show server response 
            }
        });
    });
</script>
about 4 years ago · Juan Pablo Isaza Relatório

0

$("#contactForm").submit( async (e) => {
    e.preventDefault();
    const data = {
        name: e.target.elements[0].value,
        email: e.target.elements[1].value,
        message: e.target.elements[2].value,
    }
    const response = await fetch(url, {
        method: 'POST', // *GET, POST, PUT, DELETE, etc.
        mode: 'cors', // no-cors, *cors, same-origin
        credentials: 'same-origin', // include, *same-origin, omit
        headers: {
          'Content-Type': 'application/json'
        },
        redirect: 'follow', // manual, *follow, error
        referrerPolicy: 'no-referrer', // no-referrer, *no-referrer-when- 
       downgrade, origin, origin-when-cross-origin, same-origin, strict- 
       origin, strict-origin-when-cross-origin, unsafe-url
       body: JSON.stringify(data) // body data type must match "Content-Type" header
  });
})
about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda