How to send form data through get request in fetch api

Question

I was having an API where I am calling a get request to send to query parameters through form data but I am getting get request doesn't take form data. How to do it

http://ihub-fastapi-solubility.herokuapp.com/predict?solute=CC(C)(C)Br&solvent=CC(C)(C)O this is the URL and solute and solvent are the query parameters.

  const onSubmit = (e) => {
    e.preventDefault(); // <-- prevent the default form action

    const formData = new FormData();
    formData.set("solute", solutestate); // <-- local component state
    formData.set("solvent", solventstate); // <-- local component state
    console.log({ formData });

    fetch("http://ihub-fastapi-solubility.herokuapp.com/predict", {
      method: "get",
      body: formData,
    }).catch((err) => {
      setError(err.error);
      console.log(err);
    });

When I tried with post I got this error

You can't send body with GET request, only with POST. Change the API so that it accepts and processes POST requests — ComixRu
– ComixRu, Commented Feb 8, 2022 at 1:52
@ComixRu I don't think OP wants to send a POST request at all, they just want to capture their FormData params as query parameters — Phil
– Phil, Commented Feb 8, 2022 at 2:20

Phil · Accepted Answer · 2022-02-08 02:15:06Z

4

FormData isn't the best choice here as that is primarily used in constructing multipart/form-data request payloads for use in POST, PUT and PATCH requests.

Use URLSearchParams instead to easily construct query parameters and serialise it into the URL...

const fetch = function fakeFetch(url, init) {
  console.log(init.method, url)
}

const solutestate = "CC(C)(C)Br"
const solventstate = "CC(C)(C)O"

const params = new URLSearchParams({
  solute: solutestate,
  solvent: solventstate
})

fetch(`http://ihub-fastapi-solubility.herokuapp.com/predict?${params}`, {
  method: "GET"
})

Using URLSearchParams has the added benefit of correctly URL encoding your data.

edited Feb 8, 2022 at 2:15

answered Feb 8, 2022 at 1:55

Phil

166k25 gold badges265 silver badges269 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

djvg Over a year ago

Also see template literals for more about the ${}.

djvg · Accepted Answer · 2022-11-03 10:59:42Z

2

In addition to @phil's answer: If you've got a form already, you can use FormData to initialize the URLSearchParams.

For example, if you've got a form like this

<form method="get" action="" id="form">
...
<input type="submit">
</form>

you can submit it as follows

const form = document.getElementById("form");
form.addEventListener("submit", submitForm);

function submitForm(event) {
  event.preventDefault();
  const url = form.action + "?" + new URLSearchParams(new FormData(form));
  fetch(url)...
}

answered Nov 3, 2022 at 10:59

djvg

14.8k7 gold badges84 silver badges120 bronze badges

Collectives™ on Stack Overflow

How to send form data through get request in fetch api

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related