adding form validation and submission for the staff email function

diff --git a/css/front.css b/css/front.css
index ac0a0a9..2738dda 100644 (file)
--- a/css/front.css
+++ b/css/front.css
@@ -30,7 +30,7 @@
 
 
 /* Email Modal Styles */
-.required-field{
+.required-field, .required-fail{
     color: red;
 }
 #emailModal{
@@ -43,4 +43,7 @@
 .modal-form-wrapper{
     max-width: 700px;
     display: none;
+}
+.modal-message-name{
+    font-weight: bold;
 }
\ No newline at end of file

diff --git a/models/admin/ajax/staffEmail.php b/models/admin/ajax/staffEmail.php
index 7fe9c14..65af5c7 100644 (file)
--- a/models/admin/ajax/staffEmail.php
+++ b/models/admin/ajax/staffEmail.php
@@ -90,24 +90,56 @@ class GlmMembersAdmin_ajax_staffEmail
     public function modelAction ($actionData = false)
     {
         global $wpdb;
-        $this->write_log("test");
 
-        if( isset($_REQUEST['staff_id'] ) ){
+        if( $_REQUEST['getName'] == 'true'){
+            write_log( $_REQUEST['getName']);
             $staff_id = filter_var($_REQUEST['staff_id'], FILTER_SANITIZE_STRING);
 
-            $sql = "SELECT email FROM ". GLM_MEMBERS_STAFF_PLUGIN_DB_PREFIX . "staff WHERE id = $staff_id";
-            $staff_email_address = $wpdb->get_results($sql);
-            if( $staff_email_address){
-                $staff_email_address = $staff_email_address[0]->email;
+            $sql = "SELECT fname, lname FROM ". GLM_MEMBERS_STAFF_PLUGIN_DB_PREFIX . "staff WHERE id = $staff_id";
+            $staff_name = $wpdb->get_results($sql);
+            if( $staff_name){
+
+                $staff_name = $staff_name[0];
             }else{
-                $staff_email_address = null;
+                $staff_name = null;
+            }
+
+            $return = array(
+                'name' => $staff_name
+            );
+            echo json_encode($return);
+            wp_die();
+        }else{
+            $message =  $_REQUEST['message'];
+            foreach($message as $id=>$field){
+                if( $field['name'] == 'Your Email Address' )
+                    $from_address = filter_var($field['value'], FILTER_SANITIZE_EMAIL);
+
+                if( $field['name'] == 'Your Name' )
+                    $sender_name = filter_var($field['value'], FILTER_SANITIZE_STRING);
+                
+                if( $field['name'] == 'Your Phone Number' )
+                    $phone_number = filter_var($field['value'], FILTER_SANITIZE_STRING);
+
+                if( $field['name'] == 'Email Subject' )
+                    $email_subject = filter_var($field['value'], FILTER_SANITIZE_STRING);
+
+                if( $field['name'] == 'Email Message' )
+                    $email_message = filter_var($field['value'], FILTER_SANITIZE_STRING);
             }
+            write_log($email_message);
+            write_log($sender_name);
+            write_log($phone_number);
+            write_log($email_subject);
+            write_log($from_address);
 
+            $staff_id = filter_var($_REQUEST['staff_id'], FILTER_SANITIZE_STRING);
+            $sql = "SELECT email FROM ". GLM_MEMBERS_STAFF_PLUGIN_DB_PREFIX . "staff WHERE id = $staff_id";
+            $staff_email = $wpdb->get_results($sql);
+            if( $staff_email ){
+                $staff_email = $staff_email[0];
+                wp_mail($to, $subject, $message);
+            }
         }
-        $return = array(
-            'email' => $staff_email_address,    // Where our events list will go
-        );
-        echo json_encode($return);
-        wp_die();
     }
 }

diff --git a/views/front/staff/list.html b/views/front/staff/list.html
index 8ad2fc0..bee6668 100644 (file)
--- a/views/front/staff/list.html
+++ b/views/front/staff/list.html
@@ -75,33 +75,40 @@
     
     <div class="row modal-form-wrapper">
         <div id="modal-handle"><h2> Send A Message</h2></div>
+        <div id="modal-errors"></div>
         <div id="modal-instructions"></div>
         <form action="">
             <div class="modal-email-label">Your Name &nbsp;<span class="required-field">(required)</span></div>
-            <input class="modal-email-field" type="text" id="sender-name" required>
+            <input class="modal-email-field modal-required" type="text" id="sender-name" name="Your Name" required>
             <div class="modal-email-label">Your Email Address&nbsp;<span class="required-field">(required)</span></div>
-            <input class="modal-email-field" type="text" id="sender-email" required>
+            <input class="modal-email-field modal-required" type="text" id="sender-email" name="Your Email Address" required>
             <div class="modal-email-label">Your Phone Number </div>
-            <input class="modal-email-field" type="text" id="sender-phone">
+            <input class="modal-email-field" type="text" id="sender-phone" name="Your Phone Number">
             <div class="modal-email-label">Email Subject &nbsp;<span class="required-field">(required)</span></div>
-            <input class="modal-email-field" type="text" id="email-subject" required>
+            <input class="modal-email-field modal-required" type="text" id="email-subject" name="Email Subject" required>
             <div class="modal-email-label">Email Message</div>
-            <textarea rows="5" class="modal-email-field" type="text" id="email-message"></textarea>
-            <input class="button" type="submit" value="Submit">
+            <textarea rows="5" class="modal-email-field" type="text" id="email-message" name="Email Message"></textarea>
+            <input class="button" type="button" value="Send" name="submit" id="modal-submit">
         </form>
     </div>
     <a class="close-reveal-modal" aria-label="Close">&#215;</a>
 </div>
 <script>
     jQuery(function($){
+        var id;
+        var requiredFields = ['Your Name', 'Email Address', 'Email Subject'];
+        function validateEmail(email) {
+            {literal} var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; {/literal}
+                return re.test(String(email).toLowerCase());
+        }
+        let data = {
+            action      : 'glm_members_admin_ajax',
+            glm_action  : 'staffEmail'
+        }
        $('.glm-staff-email > a').on("click", function(e){  
-            let id = $(this).data('id');
-            let data = {
-                action: 'glm_members_admin_ajax',
-                glm_action: 'staffEmail',
-                staff_id: id
-            };
-
+            id = $(this).data('id');
+            data.staff_id = id;
+            data.getName = true;
             $.ajax({
                 type: 'POST',
                 url: '{$ajaxUrl}',
@@ -115,12 +122,58 @@
                 cache: false,
                 success: function (response){
                     console.log(response)
-                    $('<span class="message-instructions">To send a message directly to STAFF NAME please fill out the form below and click "Send" when complete.</span>').appendTo( $("#modal-instructions"));
+                    var fullName = JSON.parse(response);
+                    var firstName = fullName.name['fname'];
+                    var lastName = fullName.name['lname'];
+                    var printName = firstName + " " + lastName;
+
+                    $('<span class="message-instructions">To send a message directly to <span class="modal-message-name">' + printName +  ' </span> please fill out the form below and click "Send" when complete.</span>').appendTo( $("#modal-instructions"));
 
                     $(".modal-form-wrapper").fadeIn("fast");
                 }
             })
         })
+
+        $("#modal-submit").on("click", function(e){
+            var fields = $(".modal-form-wrapper").find(".modal-email-field").serializeArray();
+            $("#modal-errors").empty();
+            var badFields = false;
+
+            $.each(fields, function(i, field) {
+                if( requiredFields.indexOf(field.name) > -1){
+                    if(field.name === "Your Email Address"){
+                        // if( !validateEmail(field.value) || !field.value ){
+                        //     badFields = true;
+                        //     $('<div class="required-fail">' + field.name + ' is not valid </div>').appendTo( $("#modal-errors") );
+                        // }
+                    }
+                    if (!field.value){
+                        $('<div class="required-fail">' + field.name + ' is required </div>').appendTo( $("#modal-errors") );
+                        badFields = true;
+                    }
+                }
+            }); 
+            data.message = fields;
+            data.getName = false;
+            if(!badFields){
+                $.ajax({
+                type: 'POST',
+                url: '{$ajaxUrl}',
+                data: data,
+                beforeSend: function(){
+                    
+                },
+                complete: function(){
+                    
+                },
+                cache: false,
+                success: function (response){
+                    console.log(response)
+                    
+                }
+            })
+            }
+        });
     });
 
 </script>
\ No newline at end of file