jgarcia45 · jgarcia45 · Jan 16, 2020 · Jan 16, 2020 · Jan 16, 2020 · Jan 16, 2020
diff --git a/Volunteer.html b/Volunteer.html
@@ -96,7 +96,7 @@
       </div>
 
       <!--Grid Row-->
-      <form class="" action="">
+      <form class="" name="volunteerForm" id="volunteerForm"  action="volunteer.php" method="POST">
         <!--Grid row-->
         <div class="row">
 
@@ -107,38 +107,34 @@
             <div class="row">
 
               <!--Grid column-->
-              <div class="col-md-6">
+              <div class="col">
 
                 <!-- Material outline input -->
                 <div class="md-form md-outline mb-0">
-                  <input type="text" id="form-first-name" class="form-control">
-                  <label for="form-first-name">First name</label>
+                  <input type="text" id="name" name="name" class="form-control">
+                  <label for="name">Name</label>
                 </div>
 
               </div>
               <!--Grid column-->
 
               <!--Grid column-->
-              <div class="col-md-6">
-
-                <!-- Material outline input -->
-                <div class="md-form md-outline mb-0">
-                  <input type="text" id="form-last-name" class="form-control">
-                  <label for="form-last-name">Last name</label>
-                </div>
-
-              </div>
+
               <!--Grid column-->
 
             </div>
             <!--Grid row-->
-
+            <div class="md-form md-outline mb-0">
+              <input type="email" id="email" name="email" class="form-control">
+              <label for="email">E-mail</label>
+            </div> 
+
             <div class="row">
               <div class="col-md-6">
 
                 <!-- Phone -->
                 <div class="md-form md-outline mb-0">
-                  <input type="tel" id="Phone" class="form-control">
+                  <input type="tel" id="Phone" name=Phone class="form-control">
                   <label for="Phone">Phone (Optional)</label>
                 </div>
 
@@ -147,8 +143,8 @@
 
                 <!-- Prefered Option -->
                 <div class="md-form md-outline mb-0">
-                  <select class="browser-default custom-select select-font">
-                    <option value="" disabled selected>Text OK?</option>
+                  <select class="browser-default custom-select select-font" id="textok" name="textok">
+                    <option value="" disabled selected>Text Ok?</option>
                     <option value="1">Yes</option>
                     <option value="2">No</option>
                   </select>
@@ -157,24 +153,21 @@
             </div>
 
             <!-- Material outline input -->
-            <div class="md-form md-outline mb-0">
-              <input type="email" id="form-email" class="form-control">
-              <label for="form-email">E-mail</label>
-            </div>
+
 
             <!-- Material outline input -->
             <div class="md-form md-outline">
-              <input type="text" id="form-subject" class="form-control">
-              <label for="form-subject">What task you'd like to help with</label>
+              <input type="text" id="subject" name="subject" class="form-control">
+              <label for="subject">What task you'd like to help with</label>
             </div>
 
             <!--Material textarea-->
             <div class="md-form md-outline mb-3">
-              <textarea id="form-message" class="md-textarea form-control" rows="3"></textarea>
-              <label for="form-message">Anymore information you'd like to share</label>
+              <textarea id="message" name="message" class="md-textarea form-control" rows="3"></textarea>
+              <label for="message">Anymore information you'd like to share</label>
             </div>
 
-            <button type="submit" class="btn submit-button btn-lg ml-0">Submit</button>
+            <button type="button" class="btn submit-button btn-lg ml-0" onclick="volunteerSubmit()">Submit</button>
 
           </div>
           <!--Grid column-->
@@ -227,7 +220,7 @@
   <!-- MDB core JavaScript -->
   <script type="text/javascript" src="js/mdb.min.js"></script>
   <!-- Your custom scripts (optional) -->
-  <script type="text/javascript"></script>
+  <script type="text/javascript" src="js/VolunteerValidation.js"></script>
 
 
 

diff --git a/js/ContactValidation.js b/js/ContactValidation.js
@@ -30,6 +30,7 @@ function ValidateContactUsForm() {
             document.getElementById('textok').className="browser-default custom-select is-valid"
         } else {
             document.getElementById('textok').className="browser-default custom-select is-invalid"
+            return false;
         }
     }
 

diff --git a/js/VolunteerValidation.js b/js/VolunteerValidation.js
@@ -0,0 +1,77 @@
+function volunteerSubmit() {
+    var name = document.getElementById('name').value;
+    document.getElementById('name').className = "form-control is-valid"
+
+    if (name == "") {        
+        document.getElementById('name').className = "form-control is-invalid"
+        return false;
+    }
+    var email = document.getElementById('email').value;
+    document.getElementById('email').className = "form-control is-valid"
+    if (email == "") {
+
+        document.getElementById('email').className = "form-control is-invalid"
+        return false;
+    } else {
+        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,}))$/;
+        if (!re.test(email)) {
+            window.alert("Email format invalid");
+            document.getElementById('email').className = "form-control is-invalid"
+            return false;
+        }
+    }
+
+    var phone = document.getElementById('Phone').value;
+    console.log(document.getElementById('textok').value);
+    if (phone !== "") {
+        document.getElementById('textok').className="browser-default custom-select"
+        if (document.getElementById('textok').value !== "") {
+            document.getElementById('textok').className="browser-default custom-select is-valid"
+        } else {
+            document.getElementById('textok').className="browser-default custom-select is-invalid"
+            return false;
+        }
+    }
+
+    var subject = document.getElementById('subject').value;
+    document.getElementById('subject').className = "form-control is-valid"
+    if (subject == "") {
+
+        document.getElementById('subject').className = "form-control is-invalid"
+        return false;
+    }
+    var message = document.getElementById('message').value;
+    document.getElementById('message').className = "form-control is-valid"
+    if (message == "") {
+        document.getElementById('message').className = "form-control is-invalid"
+        return false;
+    }
+
+
+    formData = {
+        'name': $('input[name=name]').val(),
+        'email': $('input[name=email]').val(),
+        'subject': $('input[name=subject]').val(),
+        'message': $('textarea[name=message]').val(),
+        'Phone':$('input[name=Phone]').val(),
+        'textok':$('select[name=textok]').val()
+    };
+
+
+    $.ajax({
+        url: "contactus.php",
+        type: "POST",
+        data: formData,
+        success: function (data, textStatus, jqXHR) {
+
+            $('#status').text(data.message);
+            if (data.code) //If mail was sent successfully, reset the form.
+                $('#volunteerForm').closest('form').find("input[type=text], textarea").val("");
+        },
+        error: function (jqXHR, textStatus, errorThrown) {
+            $('#status').text(jqXHR);
+        }
+    });
+
+    document.getElementById('volunteerForm').submit();
+}
diff --git a/volunteer.php b/volunteer.php
@@ -0,0 +1,42 @@
+<?php
+if(isset( $_POST['name']))
+$name = $_POST['name'];
+if(isset( $_POST['email']))
+$email = $_POST['email'];
+if(isset( $_POST['message']))
+$message = $_POST['message'];
+if(isset( $_POST['Phone']))
+$Phone = $_POST['Phone'];
+if(isset( $_POST['subject']))
+$subject =  $_POST['subject'];
+
+$textok = $_POST['textok'];
+
+if ($name === ''){
+    echo "Name cannot be empty.";
+    die();
+    }
+    if ($email === ''){
+    echo "Email cannot be empty.";
+    die();
+    } else {
+    if (!filter_var($email, FILTER_VALIDATE_EMAIL)){
+    echo "Email format invalid.";
+    die();
+    }
+    }
+    if ($subject === ''){
+    echo "Subject cannot be empty.";
+    die();
+    }   
+    if ($message === ''){
+    echo "Message cannot be empty.";
+    die();
+    }
+
+$content="From: $name \n Email: $email \n Message: $message \n Phone: $Phone Texting Ok: $textok"  ;
+$recipient = "harman2to1@gmail.com";
+$mailheader = "From: $email \r\n";
+mail($recipient, $subject, $content, $mailheader) or die("Error!");
+echo "Email sent!";
+?>