Form submission not working

I am trying to practice API use by building my own version of the Wanderlust project. However I do not know how to link the submission of the search query to javascript. Whenever submit is pressed the page just reloads, reloading all the background JS with it and so no query is sent.

Can anyone explain what I am missing here?

reading some documentation might help to understand form behavior:

https://developer.mozilla.org/en-US/docs/Learn/Forms/Your_first_form
https://developer.mozilla.org/en-US/docs/Learn/Forms/Sending_and_retrieving_form_data

As you can read in the docs:

The method attribute defines how data is sent. The HTTP protocol provides several ways to perform a request;

but if we work with JS, we don’t want the default http protocol. So you will need to a way to prevent that.

I wish I could say that it did help but it really didn’t :drooling_face:

Perhaps I’m not explaining my problem properly…
All I want to do is for a user to input a string and for me to be able to grab that value and feed it in to my JS as a string variable, which will ultimately be fed in to an endpoint link for an API call. Now I have the API all set up using Async/Await, but I’m struggling to take that user input and grab it as a simple string that can be stored in a variable?

The first step is understanding forms, and how forms work. The earlier versions of forms used http to send the form, resulting a response.

Given this was how forms work in the beginning, this is still the default behavior

Without understanding these fundamentals, you can’t progress to the next step

The next steps then would be:

prevent the form being send with http(s)
read the data from the input field
send the form using JS

Sure, I could tell you how all this could be done. But then you would just get stuck later on. You need to take some time to understand this process.

Have you figured out how to prevent the form from submitting? If not, that would the first step to search for. Something: javascript prevent form submission

e.preventDefault() Thanks! :upside_down_face: