ditch jQuery on the client side

Author: k1sul1

assets/scripts/wplf-form.js

@@ -2,82 +2,75 @@
  * JS to be included on the front end pages with forms
  */
 
-(function($) {
-
-$(document).ready(function() {
-
-  // ajax form submissions
-  $('.libre-form').submit(function(e) {
-
-    var $form = $(this);
-
-    // add class to enable css changes to indicate ajax loading
-    $form.addClass('sending');
-
-    // reset errors
-    $form.find('.wplf-error').remove();
-
-    var data = new FormData($form[0]); // includes files too, but for some reason we don't see them at the server
-
-
-    window.data = data;
-
-
-    fetch(ajax_object.ajax_url  + '?action=wplf_submit', {
-      method: "POST",
-      body: data
-    }).then(function(response){
-      //console.log(response);
-      return response.text();
-    }).then(function(response){
-      console.log(response);
-      response = JSON.parse(response);
-      if( 'success' in response ) {
-        // show success message if one exists
-        $form.after(response.success);
-      }
-      if( 'ok' in response && response.ok ) {
-        // submit succesful!
-        $form.remove();
-      }
-      if( 'error' in response ) {
-        // show error message in form
-        $form.append('<p class="wplf-error error">' + response.error + '</p>');
-      }
-      $form.removeClass('sending');
-    }).catch(function(error){
-      console.log("Fetch error: ", error);
-      $form.removeClass('sending');
-    });
+(function(){
+document.addEventListener("DOMContentLoaded", function(){
+  [].forEach.call(document.querySelectorAll(".libre-form"), function(form){
+
+    form.addEventListener("submit", function(e){
+
+      // add class to enable css changes to indicate ajax loading
+      form.classList.add("sending");
+
+      [].forEach.call(form.querySelectorAll(".wplf-error"), function(error){
+        // reset errors
+        error.parentNode.removeChild(error);
+      });
+
+      var data = new FormData(form);
+
+      window.data = data;
+
+      fetch(ajax_object.ajax_url  + '?action=wplf_submit', {
+        method: "POST",
+        body: data
+      }).then(function(response){
+
+        return response.text();
+
+      }).then(function(response){
+
+        response = JSON.parse(response);
 
-    // submit form to ajax handler in admin-ajax.php
-    /*$.post( ajax_object.ajax_url + '?action=wplf_submit',
-      $(this).serialize(),
-      function(response) {
-        console.log(response);
         if( 'success' in response ) {
           // show success message if one exists
-          $form.after(response.success);
+
+          var success = document.createElement("p");
+          success.className = "wplf-success";
+          success.innerHTML = response.success;
+
+          form.parentNode.insertBefore(success, form.nextSibling);
+
         }
+
         if( 'ok' in response && response.ok ) {
           // submit succesful!
-          $form.remove();
+          form.parentNode.removeChild(form);
         }
+
         if( 'error' in response ) {
           // show error message in form
-          $form.append('<p class="wplf-error error">' + response.error + '</p>');
+
+          var error = document.createElement("p");
+          error.className = "wplf-error error";
+          error.textContent = response.error;
+
+          form.appendChild(error);
         }
-      }
-    ).always(function() {
-      // finished XHR request
-      $form.removeClass('sending');
-    });*/
 
-    // don't actually submit the form, causing a page reload
-    e.preventDefault();
-    return false;
+        form.classList.remove('sending');
+
+      }).catch(function(error){
+
+        console.warn("Fetch error: ", error);
+        form.classList.remove("sending");
+
+      });
+
+      // don't actually submit the form, causing a page reload
+
+      e.preventDefault();
+    });
 
   });
 });
-
-})(jQuery);
+})();

classes/class-cpt-wplf-form.php

@@ -453,7 +453,7 @@ function maybe_enqueue_frontend_script() {
     global $post;
 
     // register the script, but only enqueue it if the current post contains a form in it
-    wp_register_script( 'wplf-form-js', plugins_url( 'assets/scripts/wplf-form.js', dirname(__FILE__) ), array( 'jquery' ) );
+    wp_register_script( 'wplf-form-js', plugins_url( 'assets/scripts/wplf-form.js', dirname(__FILE__) ), array() );
 
     if( is_a( $post, 'WP_Post' ) && ( has_shortcode( $post->post_content, 'libre-form') || $post->post_type === 'wplf-form') ) {
       wp_enqueue_script( 'wplf-form-js' );