How do I put text from a form into my Javascript api request?

Question

Sorry if this is a dumb question, I have a form in my HTML document and I want to put the text that you submit from the form into my Javascript API call.

<form id="form">
 <input type="text" id="query" name="keyw">
 <button>Search</button>
</form>

I need to get the output from this into the [USER TEXT HERE] part

 fetch("https://example.com/search?keyw=[USER TEXT HERE]")
 .then((response) => response.json())

How would I do that? Thanks.

Note that the question's code provides a hint on how to concatenate the text with the URL. — Heretic Monkey, Dec 23 '22 at 21:53

Julien Widmer · Answer 1 · 2022-12-23T22:09:59.813

0

In Javascript we can create an event listener for onSubmit:

document.getElementById("form").addEventListener("submit", fetchSomeAPI);

Inside the fetchSomeAPI function it's just a matter of concatenating the user's input and the request:

function fetchSomeAPI() {
    fetch(`https://example.com/search?keyw=${document.getElementById("query").value}`)
    .then((response) => response.json())
}

edited Dec 23 '22 at 22:09

answered Dec 23 '22 at 22:08

Julien Widmer

3
2

score -1 · Answer 2 · answered Dec 23 '22 at 22:06

-1

To get the value from the form, you need to listen for a keypress event on that <input /> to make sure that the value is updated every time the user interacts with the input. Something like: https://codesandbox.io/s/example-quin-g5z54m

answered Dec 23 '22 at 22:06

sorin182004

17
5

Note that on Stack Overflow we require that code is shared on Stack Overflow in addition to any external sites like Code Sandbox. – Heretic Monkey Dec 23 '22 at 22:28

How do I put text from a form into my Javascript api request?

2 Answers2