How to use Fetch API to retrieve and send data from form?

Question

I have html form:

<form action="file.php" method="post">
    <input name="formName" type="text" />
    <input name="formEmail" type="email" />
    <input name="formSubmit" type="submit" value="Submit Me!" />
</form>

So how to use Fetch API in order to get those values and send them to file.php file using ajax?

Answer 1

Using Fetch API

 function submitForm(e, form){ e.preventDefault(); fetch('file.php', { method: 'post', body: JSON.stringify({name: form.formName.value, email: form.formEmail.value}) }).then(function(response) { return response.json(); }).then(function(data) { //Success code goes here alert('form submited') }).catch(function(err) { //Failure alert('Error') }); } 

 <form action="file.php" method="post" onsubmit="submitForm(event, this)"> <input name="formName" type="text" /> <input name="formEmail" type="email" /> <input name="formSubmit" type="submit" value="Submit Me!" /> </form> 

Answer 2

I would recommend to use FormData . It uses the same format a form would use if the encoding type were set to "multipart/form-data". More details about it.

    const submitForm = () => {
        const formEl = document.getElementById('formId');
        const payload = new FormData(formEl);

        fetch('file.php', {
            method: 'POST',
            body: payload,
        })
        .then(Result => Result.json())
        .then(data => {
            console.log(data);
            // your code comes here
        })
        .catch(errorMsg => {
            console.log(errorMsg);
        });

    };