e.PreventDefault() not firing as intended, form submission

Question

As simple as the title states, why is the e.PreventDefault not executing while all the alerts are?

I only want the page to be forwarded when the alert "All details match" is fired. My code: https://jsfiddle.net/3fmru8oa/

This is the section I am asking about

<script>
        function loginValidator() {
          const submitButton = document.getElementById("form");
          const username = document.getElementById('uid')
          const password = document.getElementById('pwd')

          const db = new Localbase("vChatDataBase")


          submitButton.addEventListener('submit', function (e) {

            console.log(`Inputed field uid: ${username.value}`)
            console.log(`Inputed field pwd: ${password.value}`)

            db.config.debug = false


            db.collection('users').doc({ username: username.value }).get().then(document => {
              if(document === undefined) {
                alert("No user exist's with this username!")
                return e.preventDefault()
              } else {


                  if(document['password'] !== password.value ) {
                    alert("Incorrect password!")
                    return e.preventDefault()
                  } else {
                    alert("All details matched")
                    return Cookies.set("cookieUsername", document['username'])
                  }
              }
            })
          })
        }
</script>

I attempted to do this with jQuery yet the same issue remained. I have also tried to return false

Does this have something to do with scoping? And how is this fixed?

The DB request is asynchronous. By the time it resolves and you call `e.preventDefault()`, the form submission is *long* gone. — Niet the Dark Absol, Jul 19 '21 at 08:20
Related: [How to return the response from an asynchronous call](https://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-asynchronous-call/14220323#14220323) — freedomn-m, Jul 19 '21 at 09:16

score 0 · Answer 1 · answered Jul 19 '21 at 08:15

Remove the event handler from the loginValidator function. Once you've hooked up an event handler to the submit event, you don't need an onclick method.

In you fiddle code, the problem is when you click submit two things are happening

The loginValidator code is executing, which assigns a event handler to the submit button
The submit event is fired, which redirects you to the profilePage.html page (hence the 404 error)

So what you want to do first is move the code for adding an event handler to the submit event out of the function, so that the event is registered from the start, and not when the button is clicked, because you want that code to run everytime you press submit.

So the script should look something like this

<script>
    submitButton.addEventListener('submit', function (e) {
        const submitButton = document.getElementById("form");
        const username = document.getElementById('uid');
        const password = document.getElementById('pwd');

        const db = new Localbase("vChatDataBase");

        console.log(`Inputed field uid: ${username.value}`)
        console.log(`Inputed field pwd: ${password.value}`)

        db.config.debug = false


        db.collection('users').doc({ username: username.value }).get().then(document => {
          if(document === undefined) {
            alert("No user exist's with this username!")
            return e.preventDefault()
          } else {


              if(document['password'] !== password.value ) {
                alert("Incorrect password!")
                return e.preventDefault()
              } else {
                alert("All details matched")
                return Cookies.set("cookieUsername", document['username'])
              }
          }
        })
      })
</script>

Just remove the loginValidator function, then see if the issue still happens

e.PreventDefault() not firing as intended, form submission

1 Answers1