mardi 25 juillet 2017

AJAX action not happening after clicking the submit button

HTML Code

                            <form class="ajax-form" id="contactForm" method="post" action="assets/php/contact.php">
                            <div class="form-group">
                                <input type="text" class="form-control" id="name" name="name" placeholder="Your Name..." value="" required>
                            </div>
                            <div class="form-group">
                                <input type="email" class="form-control" id="email" name="email" placeholder="Your email..." value="" required>
                            </div>
                            <div class="form-group">
                                <input type="phone" class="form-control" id="phone" name="phone" placeholder="Your phone..." value="" required>
                            </div>
                            <div class="form-group">
                                <textarea class="form-control" rows="4" name="message" placeholder="Your message..." required></textarea>
                            </div>
                            <div class="form-group">
                                <button type="submit" name="submit" class="btn btn-default"><i class="fa fa-paper-plane fa-fw"></i> Send</button>
                            </div>
                        </form>

PHP Code (contact.php)

<?php

header('Content-type: application/json'); if($_POST) { $to_email = "nishat.sayyed0403@gmail.com"; //Recipient email, Replace with own email here

//check if its an ajax request, exit if not
if(!isset($_SERVER['HTTP_X_REQUESTED_WITH']) AND strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) != 'xmlhttprequest') {

    $output = json_encode(array( //create JSON data
        'type'=>'error',
        'text' => 'Sorry Request must be Ajax POST'
    ));
    die($output); //exit script outputting json data
}

//Sanitize input data using PHP filter_var().
$user_name      = filter_var($_POST["name"], FILTER_SANITIZE_STRING);
$user_email     = filter_var($_POST["email"], FILTER_SANITIZE_EMAIL);
$phone_number   = filter_var($_POST["phone"], FILTER_SANITIZE_NUMBER_INT);
$message        = filter_var($_POST["message"], FILTER_SANITIZE_STRING);

//additional php validation
if(strlen($user_name)<4){ // If length is less than 4 it will output JSON error.
    $output = json_encode(array('type'=>'error', 'text' => 'Name is too short or empty!'));
    die($output);
}

if(!filter_var($user_email, FILTER_VALIDATE_EMAIL)){ //email validation
    $output = json_encode(array('type'=>'error', 'text' => 'Please enter a valid email!'));
    die($output);
}


if(!filter_var($phone_number, FILTER_SANITIZE_NUMBER_FLOAT)){ //check for valid numbers in phone number field
    $output = json_encode(array('type'=>'error', 'text' => 'Enter only digits in phone number'));
    die($output);
}

if(strlen($message)<3){ //check emtpy message
    $output = json_encode(array('type'=>'error', 'text' => 'Too short message! Please enter something.'));
    die($output);
}

//email subject
$subject ='New mail via contact form';

//email body
$message_body = $message."\r\n\r\n-".$user_name."\r\n\r\nEmail : ".$user_email."\r\nPhone Number : ". $phone_number ;

//proceed with PHP email.
$headers = 'From: '.$user_name.'<'.$user_email.'>'."\r\n" .
'Reply-To: '.$user_name.'<'.$user_email.'>' . "\r\n" .
'X-Mailer: PHP/' . phpversion();

$send_mail = mail($to_email, $subject, $message_body, $headers);

echo "<h1 style='color: red; font-size: 100px'>From contact.php</h1>";

if(!$send_mail)
{
    //If mail couldn't be sent output error. Check your PHP email configuration (if it ever happens)
    $output = json_encode(array('type'=>'error', 'text' => 'Could not send mail! Please check your PHP mail configuration.'));
    die($output);
}else{
    $output = json_encode(array('type'=>'success', 'text' => 'Hi '.$user_name .', thank you for your email, we will get back to you shortly.'));
    echo($output);
}

} ?>

AJAX code

$(function() {
// validate contact form on keyup and submit
$("#contactForm").validate({
    rules: {
        name: {
            required: true,
            minlength: 2,
            lettersonly: true
        },
        email: {
            required: true,
            minlength: 6,
            email: true
        },
        phone: {
            required: true,
            digits: true,
            minlength: 10,
            maxlength: 15
        },
        message: {
            required: true,
            minlength: 6
        }
    },
    messages: {
        name: {
            required: "Please enter your name",
            minlength: "Minimum 2 characters",
            lettersonly: "Only letters please!"
        },
        email: {
            required: "Please enter your email address",
            minlength: "Minimum 6 characters",
            email: "That's an invalid email"
        },
        phone: {
            required: "Please enter your phone number",
            digits: "Only digits (no spaces)",
            minlength: "Minimum 10 characters",
            maxlength: "Maximum 15 characters"
        },
        message: {
            required: "Please enter your message",
            minlength: "Minimum 6 characters"
        }
    },
    success: function(label) {
        label.addClass("valid").text("Perfect!");
    },
    submitHandler: function(element) {

        var ajaxform = $(element),
            url = ajaxform.attr('action'),
            type = ajaxform.attr('method'),
            data = {};

        $(ajaxform).find('[name="submit"]').html('<i class="fa fa-circle-o-notch fa-spin fa-fw"></i> Sending...');


        ajaxform.find('[name]').each(function(index, value) {
            var field = $(this),
                name = field.attr('name'),
                value = field.val();

            data[name] = value;

        });

        $.ajax({
            url: url,
            type: type,
            data: data,
            success: function(response) {
                if (response.type == 'success') {
                    $("#contactForm").before("<div class='alert alert-success' role='alert'><a href='#' class='close' data-dismiss='alert'>&times;</a>" + response.text + "</div>");
                    $(ajaxform).each(function() {
                        this.reset();
                        $(this).find('[name="submit"]').html('<i class="fa fa-paper-plane fa-fw"></i> Send');
                    }).find('.valid').each(function() {
                        $(this).remove('label.valid');
                    })
                } else if (response.type == 'error') {
                    $("#contactForm").before("<div class='alert alert-danger' role='alert'><a href='#' class='close' data-dismiss='alert'>&times;</a>" + response.text + "</div>");
                    $(ajaxform).find('[name="submit"]').html('<i class="fa fa-paper-plane fa-fw"></i> Send');
                }
            }
        });

        return false;
    }
});

The problem is that whenever I click on the Send Button no action is performed. Neither positive nor negative. Nothing happens.

I want to send an email to the user on his entered email ID. Plz help

Thanx in advance




Aucun commentaire:

Enregistrer un commentaire