How to send form data to API post via JavaScript

Question

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();

});

To what API and endpoint do you need to send it to? I see you're using jQuery, have you looked into the [$.ajax](https://api.jquery.com/Jquery.ajax/) documentation to send HTTP request with JavaScript? I would recommend learning how to find the answer you're looking for with search engines, as there are guaranteed to be a lot of examples and tutorials on this subject. Nevertheless, we'll help you out. — Emiel Zuurbier, Sep 25 '21 at 09:05
Check this [https://stackoverflow.com/a/6960586/2424652](https://stackoverflow.com/a/6960586/2424652) — Darpan Kulkarni, Sep 25 '21 at 09:06

score 1 · Answer 1 · answered Sep 25 '21 at 09:10

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>

AnanthDev · Answer 2 · 2021-09-25T09:15:50.530

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

Abhishek · Answer 3 · 2021-09-25T09:37:12.440

$("#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
  });
})

score -1 · Answer 4 · edited May 07 '22 at 17:38

-1

let formData = new FormData();
formData.append('variable1', variable1);
formData.append('variable2', variable2);

url = `url`
options = {
  method: 'POST',
  body: formData
}

let response = await request(url, options)

edited May 07 '22 at 17:38

Tyler2P

2,324
26
22
31

answered May 07 '22 at 07:30

Datta Sugavr

1
1

5

This answer lacks some important pieces . It uses an undefined function(request) and doesn't explain what you are doing – Manos Kounelakis May 07 '22 at 15:27

How to send form data to API post via JavaScript

4 Answers4