event.preventDefault question

#1

Hi, was trying to redo some exercise in Request topic from scratch and found a part of a function that I don’t know how it works and really can’t find an answer to. In the function below, displaySuggestions, it calls the method preventDefault(). What is this function trying to prevent? What is the default action of the event? I try to remove that part and run the code but it didn’t work meaning I need that method to prevent an default action for it to work.

Please see below for the link to all the files to the whole project.

Thanks in advance.

//information to reach API
const dataMuseUrl = 'https://api.datamuse.com/words?’;
const queryParams = ‘rel_jjb=’;

//selecting page elements
const inputField = document.querySelector(’#input’);
const submit = document.querySelector(’#submit’);
const responseField = document.querySelector(’#responseField’);

//AJAX function
const getSuggestions = async () => {
const wordQuery = inputField.value;
const endpoint = ${dataMuseUrl}${queryParams}${wordQuery};

try {
    const response = await fetch(endpoint);
    if (response.ok) {
        const jsonResponse = response.json();
        renderWordResponse(jsonResponse);
    } throw new Error('Request failed!')
}
catch(error) {
    console.log(error)
}

}

// clear previous results and display results to webpage
const displaySuggestions = (event) => {
event.preventDefault();
while(responseField.firstChild) {
responseField.removeChild(responseField.firstChild);
}
getSuggestions();
}

submit.addEventListener(‘click’, displaySuggestions);

//link
https://drive.google.com/drive/folders/1dmKLTHtJVh0oNVfliWthypP6E-Ell3T8?usp=sharing

#2

Before giving the answer, the question you pose:

are good, i like them. Shows you thinking (thought?) process is correct :slight_smile:

Here is a good read:

https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Your_first_HTML_form#Sending_form_data_to_your_web_server

this is about the forms default behavior (sending the form using POST), this is not the behavior we want when working with javascript, given the default form event triggers a page refresh.

#3

Hi,

Thank u so much for your reply. You mentioned this is due to the form’s default behavior when sending the form using POST, but the project contains both GET and POST requests.

So sorry, I am totally new to this. After reading the article you shared and re-analyze the code, the only part where the method displaySuggestions is called, is the event listener that is linked to the submit button in the form tag in HTML, so does that mean as long as there is an event listener linked to a HTTP request then form’s default behavior will be to refresh the page?

By using the preventDefault() function we can prevent the default action from happening and send our request?

Thank you for your help.

#4

i haven’t actually done this specific project.

using ajax, we still use GET and POST, but with JS, not the browser defaults GET (anchor element) and POST methods

so we need to prevent the browsers default submit behavior in order to achieve POST with javascript/ajax.

1 Like