Javascript/Typescript - Prevent form from resetting on submit

Question

I have a simple typescript class and a want to show the input results on submit. Even though this question is already asked, event.preventDefault() is not working. Maybe you can give me some hints?

class LoginPanel {

    public appDiv: HTMLElement = document.getElementById('app');

    constructor() {
        this.setForm();
        let btn = document.getElementById('loginButton');
        btn.addEventListener('submit', (event) => {event.preventDefault(); this.submitForm()});
    }

    public setForm(): void {
        this.appDiv.innerHTML = `<form id="loginForm" class="form-signin mt-5">
      <div class="text-center">
      <h1 class="h3 mb-3 font-weight-normal">Please sign in</h1>
      </div>
      <label for="inputEmail" class="sr-only">Email address</label>
      <input type="email" id="inputEmail" class="form-control" placeholder="Email address" required="" autofocus="">
      <label for="inputPassword" class="sr-only">Password</label>
      <input type="password" id="inputPassword" class="form-control mt-1" placeholder="Password" required="">
      <button id="loginButton" class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
    </form>
    `;
    }

    public submitForm(): void {
        const elementFirst: HTMLElement = document.createElement('pre');
        const elementSecond: HTMLElement = document.createElement('pre');

        elementFirst.innerHTML = 'email: ' + document.getElementById('loginForm')[0].value;
        document.getElementById('loginForm').appendChild(elementFirst);

        elementSecond.innerHTML = 'password: ' + document.getElementById('loginForm')[1].value;
        document.getElementById('loginForm').appendChild(elementSecond);
    }

}

new LoginPanel();

score 6 · Accepted Answer · answered Sep 07 '18 at 14:14

When you submit a form, you submit all its values, not just one button.

Accordingly, the right place to prevent the default is within the form element itself, not its buttons.

constructor() {
    this.setForm();
    const form = document.getElementById('loginForm');
    form.addEventListener('submit', (event) => {event.preventDefault(); this.submitForm()});
}

You can see that would work in this CodePen.

u-ways · Answer 2 · 2018-09-07T15:45:02.220

You can use onsubmit="return false" on the form instead:

<form id="loginForm" class="form-signin mt-5" onsubmit="return false">
  <div class="text-center">
  <h1 class="h3 mb-3 font-weight-normal">Please sign in</h1>
  </div>
  <label for="inputEmail" class="sr-only">Email address</label>
  <input type="email" id="inputEmail" class="form-control" placeholder="Email address" required="" autofocus="">
  <label for="inputPassword" class="sr-only">Password</label>
  <input type="password" id="inputPassword" class="form-control mt-1" placeholder="Password" required="">
  <button id="loginButton" class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
</form>

What's the difference?

The difference is that return false; takes things a bit further in that it also prevents that event from propagating (or "bubbling up") the DOM. The you-may-not-know-this bit is that whenever an event happens on an element, that event is triggered on every single parent element as well.

Alternatively, you could use event.stopPropagation on the form element:

constructor() {
  this.setForm();
  let btn = document.getElementById('loginButton');
  btn.addEventListener('click', (event) => { this.submitForm()});
  let form = document.getElementById('loginForm');
  form.addEventListener('submit', (event) => { event.preventDefault(); event.stopPropagation; });
}

See: What's the difference between e.preventDefault(); and return false?

Javascript/Typescript - Prevent form from resetting on submit

2 Answers2