'Is there a better way to intercept the default Shopify customer login form and make it AJAX?

So the default form is placed by Shopify using the following liquid:

   {%- form 'customer_login' -%}

I have created this hidden div for the Ajax response from /account/login:

  <div id="responseDiv" style="display: none"> </div>

Here’s the Ajax Script:

  var frm = $('#customer_login');

frm.submit(function (e) {

    e.preventDefault();

    $.ajax({
        type: frm.attr('method'),
        url: frm.attr('action'),
        data: frm.serialize(),
        success: function (data) {
          
              $('#responseDiv').html(data);
           if($.         ('#responseDiv .errors').length &gt; 0){
     console.log("ERRORS FOUND").    
       } else {
       location.reload();
      }},});});

With this script there’s a couple of issues when the form has errors, I’m quite new to JavaScript and would greatly appreciate it if anyone can provide/ helms me find a better way to achieve what I’m trying to do, thanks in advance.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'Is there a better way to intercept the default Shopify customer login form and make it AJAX?

Sources

Related Questions