Why is the page refreshed after javascript post request?

Question

When I send post request JSON to server username and score page being refreshed. Patch request does not have this problem page not being refreshed.

I need the page should not be refreshed because my score modal closes and the game restarts.


let vaxt = 5;
let timeStart = false;


input.addEventListener('keydown', ()=>{


  if (!timeStart) {

    timeStart = true;

    let timer = setInterval(()=>{
      vaxt--;
      time.innerText = `${vaxt}`;
   
      if (vaxt === 0) {
         clearInterval(timer);
         input.disabled = true;
         scoreModal.style.display = 'block';

         fetch('http://192.168.0.105:5500/users')
          .then(res => res.json())
          .then(users => {
             const existingUser = users.find(user => user.username === username)

             if (existingUser) {
                if (score > existingUser.score) {
                   fetch(`http://192.168.0.105:5500/users/${existingUser.id}`, {
                      method: 'PATCH',
                      headers: {
                       'Content-Type': 'application/json'
                      },
                      body: JSON.stringify({
                         score: score
                      })
                   })
                }
             }else{
                 fetch('http://192.168.0.105:5500/users', {
                     method: 'POST',
                     headers:{
                       'Content-Type': 'application/json'
                     },
                     body: JSON.stringify({
                        username: username,
                         score: score
                     })
                 })
             }
          })

      }
   
   }, 1000);
  }

});

can you please include all the relevant code? is this run as an event triggered by an action? if so include the relevant html and event listener in your question — Miss Skooter, Apr 24 '23 at 18:53
If the page is being refreshed as reloaded it could be how you are calling the javascript and not the javascript itself. Many times this problem comes down to the button triggering it being a submit button inside of a form. — imvain2, Apr 24 '23 at 18:53
@MissSkooter i included, I only have one input where the words of the game are written, this is a typing speed game — Emin Abdullayev, Apr 24 '23 at 19:09

score 0 · Answer 1 · answered Apr 24 '23 at 18:54

On the method that is firing the fetch, try to recieve an event and then setting it to prevent default by using:

var form = document.getElementById("myForm");
function handleForm(event) { event.preventDefault(); } 
form.addEventListener('submit', handleForm);

On this example from Stop form refreshing page on submit, handleForm() is the method being called

score 0 · Answer 2 · answered Apr 24 '23 at 19:10

To prevent the page from refreshing, you can add an event listener to the form submit event and prevent the default behavior of the event using event.preventDefault(). An example of how it would look, see if you can solve your problem:

const form = document.querySelector('form');
form.addEventListener('submit', (event) => {
event.preventDefault();
  if (vaxt === 0) {
    clearInterval(timer);
    input.disabled = true;
    scoreModal.style.display = 'block';

    fetch('http://192.168.0.105:5500/users')
      .then(res => res.json())
      .then(users => {
        const existingUser = users.find(user => user.username === username)

        if (existingUser) {
          if (score > existingUser.score) {
            fetch(`http://192.168.0.105:5500/users/${existingUser.id}`, {
              method: 'PATCH',
              headers: {
                'Content-Type': 'application/json'
              },
              body: JSON.stringify({
                score: score
              })
            })
          }
        } else {
          fetch('http://192.168.0.105:5500/users', {
            method: 'POST',
            headers: {
              'Content-Type': 'application/json'
            },
            body: JSON.stringify({
              username: username,
              score: score
            })
          })
        }
      })
  }
});

score -1 · Accepted Answer · answered Apr 25 '23 at 10:09

-1

Problem solved.I created my db.json server in seperate folder different from my project file

answered Apr 25 '23 at 10:09

Emin Abdullayev

11
8

Why is the page refreshed after javascript post request?

3 Answers3