From ac5697eeebd3b85863a4feb51318f359893a6e1c Mon Sep 17 00:00:00 2001
From: Kevin MacMartin <prurigro@gmail.com>
Date: Tue, 26 Sep 2017 15:43:02 -0400
Subject: [PATCH] Update the contact form to reflect changes to laravel and use
 name instead of id so it doesn't monopolize the keywords on potential global
 forms

---
 resources/assets/js/contact.js            | 26 +++++++++++++----------
 resources/assets/sass/pages/_contact.scss |  4 ++--
 resources/views/website/contact.blade.php | 12 +++++------
 3 files changed, 23 insertions(+), 19 deletions(-)

diff --git a/resources/assets/js/contact.js b/resources/assets/js/contact.js
index a6160b6..8e1452d 100644
--- a/resources/assets/js/contact.js
+++ b/resources/assets/js/contact.js
@@ -2,21 +2,26 @@
 function contactFormInit() {
     const $form = $("#contact-form"),
         $input = $form.find(":input"),
-        $notify = $("#notification");
+        $name = $form.find("[name='name']"),
+        $email = $form.find("[name='email']"),
+        $message = $form.find("[name='message']"),
+        $token = $form.find("[name='_token']"),
+        $submit = $form.find("[name='submit']"),
+        $notify = $form.find(".notification");
 
     let contact = {},
         submitting = false;
 
     const getContactData = function() {
         contact = {
-            name: $("#name").val(),
-            email: $("#email").val(),
-            message: $("#message").val(),
-            _token: $("#token").val()
+            name: $name.val(),
+            email: $email.val(),
+            message: $message.val(),
+            _token: $token.val()
         };
     };
 
-    $("#submit").on("click", function(e) {
+    $submit.on("click", function(e) {
         const $submit = $(this);
 
         e.preventDefault();
@@ -30,7 +35,7 @@ function contactFormInit() {
                 url: "/api/contact-submit",
                 data: contact
             }).always(function(response) {
-                let responseJSON, errors, prop;
+                let errors;
 
                 $form.find(".error").removeClass("error");
                 $notify.removeClass("visible");
@@ -40,13 +45,12 @@ function contactFormInit() {
                     $submit.addClass("disabled");
                     $notify.text("Thanks for your message!").addClass("success").addClass("visible");
                 } else {
-                    responseJSON = response.responseJSON;
                     errors = 0;
 
                     // add the error class to fields that haven't been filled out
-                    for (prop in responseJSON) {
-                        if (responseJSON.hasOwnProperty(prop)) {
-                            $("#" + prop).addClass("error");
+                    for (let errorName in response.responseJSON.errors) {
+                        if ($form.find(`[name='${errorName}']`).length) {
+                            $form.find(`[name='${errorName}']`).addClass("error");
                             errors++;
                         }
                     }
diff --git a/resources/assets/sass/pages/_contact.scss b/resources/assets/sass/pages/_contact.scss
index a0f65c6..d2f97b3 100644
--- a/resources/assets/sass/pages/_contact.scss
+++ b/resources/assets/sass/pages/_contact.scss
@@ -21,7 +21,7 @@
             height: 150px;
         }
 
-        #submit {
+        .submit {
             background-color: lighten($c-base, 5%);
             color: $c-text-light;
             font-weight: bold;
@@ -31,7 +31,7 @@
             &.disabled { background-color: $c-base; }
         }
 
-        #notification {
+        .notification {
             margin: 0px auto 15px auto;
             padding: 5px 10px;
             background-color: lighten($c-error, 15%);
diff --git a/resources/views/website/contact.blade.php b/resources/views/website/contact.blade.php
index 27594cd..4178537 100644
--- a/resources/views/website/contact.blade.php
+++ b/resources/views/website/contact.blade.php
@@ -12,14 +12,14 @@
             <div class="col-xs-12 col-md-8 col-md-offset-2">
                 <div id="contact-form">
                     <form action="#" method="POST" accept-charset="UTF-8">
-                        <input type="hidden" name="_token" id="token" value="{{ csrf_token() }}" />
-                        <input type="text" name="name" id="name" placeholder="Name" />
-                        <input type="text" name="email" id="email" placeholder="Email" />
-                        <textarea name="message" id="message" placeholder="Message"></textarea>
-                        <input id="submit" type="submit" value="Submit" />
+                        <input type="hidden" name="_token" value="{{ csrf_token() }}" />
+                        <input type="text" name="name" placeholder="Name" />
+                        <input type="text" name="email" placeholder="Email" />
+                        <textarea name="message" placeholder="Message"></textarea>
+                        <input class="submit" type="submit" name="submit" value="Submit" />
                     </form>
 
-                    <div id="notification"><strong>Error:</strong> There were problems with the <span>0</span> fields highlighted above</div>
+                    <div class="notification"><strong>Error:</strong> There were problems with the <span>0</span> fields highlighted above</div>
                 </div>
             </div>
         </div>