Question 49232 in Javascript Question posted in
A very good W3school tutorial can be found here.

Why is the page refreshed after javascript post request?

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);
  }

});
Tags:

2

Answers


  1. 0

    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

    Login or Signup to reply.
  2. 0

    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
            })
          })
        }
      })
  }
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search