Click here to Skip to main content
16,020,512 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
Hello all,
I have a website with a form that I want a user to fill out then if it is valid I have the button submit and I want it to email me. The message. If success full I want a message to popup on screen saying success I am using bootstrap 4
JavaScript
<div class="messageSuccess"></div>
            <div class="row">
                <div class="col-md-9 mb-md-0 mb-5">
                    <form id="contact-form" name="contact-form" action="" method="post"> <!--action="contactEmail.php" -->
                        <div class="row ">
                            <div class="col-md-6 ">
                                <div class="md-form mb-0 ">
                                    <input class="form-control" type="text" id="txtName" name="txtName" required />
                                    <label for="txtName">Your Name </label>
                                    <div class="nameError"></div>
                                </div>
                            </div>
                            <div class="col-md-6 ">
                                <div class="md-form mb-0 ">
                                    <input class="form-control" type="text" id="txtEmail" name="txtEmail" required />
                                    <label id="lblEmail" for="txtEmail">Your Email Address </label>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="md-form mb-0">
                                    <input class="form-control" type="text" id="txtSubject" name="txtSubject"  data-error="Subject Here" required />
                                    <label for="txtSubject">Subject </label>
                                    <div class="help-block with-errors"></div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="md-form">
                                    <textarea class="form-control" type="text" id="txtMessage" name="txtMessage" rows="4" required data-error="Please leave us a message."></textarea>
                                    <label for="txtMessage">Your Message </label>
                                </div>
                            </div>
                        </div>                    
                    <div class="text-center text-md-left">
                        <input type="submit" id="BtnFormSubmit" class="btn btn-primary btn-xl text-white" value="Send Message" />
                    </div>
                    <div class="status"></div>
                    </form>
                <!-- JavaScript Inner File Form Validation -->
    <script type="text/javascript">
        $(document).ready(function () {
            var form = $("#contact-form");
            var name = $("#txtName").val();
            var email = $("#txtEmail").val();
            var subject = $("#txtSubject").val();
            var message = $("#txtMessage").val();
            var btnSubmit = $("BtnFormSubmit");

            $(form).submit(function (event) {
                
                if (this.checkValidity() == false) {
                    $(this).addClass("was-validated");
                    event.preventDefault();
                    event.stopPropagation();
                }

                alert("Form Valid to create message");
                if (!event.isDefaultPrevented) {
                    alert("passed prevent default");
                    var url = "testemail.php";
                    // POST values 'ajax'
                    $.ajax({
                        type: "POST",
                        url: url,
                        data: $(this).serialize(),
                        success: function (data) {  // done:
                            // data = JSON object object for contactEmail.php
                            // recieve message type: success | danger
                            var messageAlert = "alert- " + data.type;
                            var messageText = data.message;
                            // Bootstrap alert box HTML
                            var alertBox = '<div class="alert ' + messageAlert + ' alert-dismissable"><button type="button" class="close" ' +
                                           'data-dismiss="alert" aria-hidden="true">×</button>' + messageText + '</div>';
                            // if messageAlert and messageText
                            if (messageAlert && messageText) {
                                // Put message on page in messageSuccess section.
                                $(form).find("#messageSuccess").html(alertBox);
                                // Reset the form.
                                $(form)[0].reset();
                            }
                        }
                    });
                    //return false;
                }

            });
                       

            //$(name).blur(function () {
            //})

            // Validate :inputs
            $(":input").blur(function () {
                let controlType = this.type;

                switch (controlType) {
                    case "text":
                    case "password":
                    case "textarea":
                        validateText($(this));
                        break;
                    case "email":
                        validateEmail($(this));
                        break;
                    default:
                        break;
                }
            });
            
            // each :input focusin remove existing validation messages if any.
            $(":input").click(function () {
                $(this).removeClass("is-valid is-invalid");
            })

            /* OPTIONAL ':input' KEYDOWN validation messages remove */

            // Reset Form and remove all validation messages.
            $(":reset").click(function () {
                $(":input").removeClass("is-valid is-invalid");
                $(form).removeClass("was-validated");
            });
        });

        // Validate Text Function
        function validateText(control) {
            let textField = control.val();
            if (textField.length > 1) {
                $(control).addClass("is-valid");
            } else {
                $(control).addClass("is-invalid");
            }
        }

        // Validate Email Function (Email newer regex: /^([\w-\.]+@([\w-]+\.)+[\w-]{2,6})?$/  )
        function validateEmail(control) {
            let textField = control.val();
            let regexPattern = /^\b[A-Z0-9._%-]+@[A-Z0-9.-]+\.[A-Z]{2,6}\b$/i;
            if (regexPattern.test(textField)) {
                $(control).addClass("is-valid");
            } else {
                $(control).addClass("is-invalid");
            }            
        }
    </script>
<?php

$from = 'SampleEmail@YourEmail.com';
$sendTo = 'sample@Gmail.com';
$subject = 'Your Message Subject Here';// Email Message Contact Form Fields
// Array - ($varName => Text from controls)
$controls = array('txtName' => 'Name', 'txtEmail' => 'Email', 'txtSubjext' => 'Subject', 'txtMessage' => 'Message');
$successMessage = 'Contact Message Successfully Sent. Thank you, I will get back to you soon.';
$errorMessage = 'There was an error submitting your message, Please try again. Or try later.';
error_reporting(E_ALL & ~E_NOTICE);
try {
	if(count($_POST) == 0) throw new \Exception('Contact Form Message is empty');
	$emailText = "You have a new message from your contact form\n------------------------------------------------------\n";
	foreach($_POST as $key => $value) {
		if(isset($controls[$key])) {
			$emailText .= "$controls[$key]: $value\n";
		}
	}
	$headers = array('Content-Type: text/plain; charset="UTF-8";',
					 'From: ' . $from,
					 'Reply-To: ' . $from,
					 'Return-Path: ' . $from,
					);
	// Send email
	mail($sendTo, $subject, $emailText, implode("\n", $headers));
	$responseArray = array('type' => 'success', 'message' => $successMessage);
}
catch(\Exception $e) {
	$responseArray = array('type' => 'danger', 'message' => $errorMessage);
}
// If AJAX request return JSON response **RARE**
if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
	$encodedJSON = json_encode($responseArray);
	header('Content-Type: application/json');
	echo $encodedJSON;
}
else {
	echo $responseArray['message'];
}


What I have tried:

many different attempts with javascript jquery php emailing mailing testing
Posted
Updated 8-Jan-19 18:14pm
Comments
MadMyche 4-Jan-19 6:52am    
So you have code and you have tested it. What works and what does not?

1 solution

I added this and was able to debug all the rest of it to make it work properly.
This was added to the .ajax() under success:

error: function (errorThrown) { 
                console.log(errorThrown);
     }
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900