Jquey $(this).serialize() return empty string

Question

I have checked for all the possible errors but not able to solve it. Although there are many related question but still not working.

       <form class="login-form" id="loginForm">
          <h3 class="login-head"><i class="fa fa-lg fa-fw fa-user"></i>SIGN IN</h3>
          <div class="form-group">
            <label class="control-label">USERNAME</label>
            <input class="form-control" type="text" name="email" id="email" placeholder="Email" autofocus>
          </div>
          <div class="form-group">
            <label class="control-label">PASSWORD</label>
            <input class="form-control" type="password" name="password" placeholder="Password">
          </div>
          <div class="form-group btn-container">
            <button class="btn btn-primary btn-block" name="login" id="loginBtn"><i class="fa fa-sign-in fa-lg fa-fw"></i>SIGN IN</button>
          </div>
        </form>

The JS is

<script type="text/javascript">
      $("#loginForm").submit(e => {
          e.preventDefault();
          var values = $(this).serialize();
          console.log(values)
      });
</script>

This is variable values is empty

Answer 1

Since you are using arrow function (() => {}), the this will not point to the event target.

So you need to use:

var values = $(e.target).serialize()