php - 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)
header('content-type: application/json'); if($_post) { $to_email = "nishat.sayyed0403@gmail.com"; //recipient email, replace own email here //check if ajax request, exit if not if(!isset($_server['http_x_requested_with']) , strtolower($_server['http_x_requested_with']) != 'xmlhttprequest') { $output = json_encode(array( //create json data 'type' => 'error', 'text' => 'sorry request must 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 less 4 output json error. $output = json_encode(array( 'type' => 'error', 'text' => 'name short or empty!' )); die($output); } if(!filter_var($user_email, filter_validate_email)) { //email validation $output = json_encode(array( 'type' => 'error', 'text' => 'please enter valid email!' )); die($output); } if(!filter_var($phone_number, filter_sanitize_number_float)) { //check valid numbers in phone number field $output = json_encode(array( 'type' => 'error', 'text' => 'enter 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 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 sent output error. check php email configuration (if ever happens) $output = json_encode(array( 'type' => 'error', 'text' => 'could not send mail! please check php mail configuration.' )); die($output); } else { $output = json_encode(array( 'type' => 'success', 'text' => 'hi ' . $user_name . ', thank email, shortly.' )); echo ($output); } } ajax code
$(function() { // validate contact form on keyup , 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 name", minlength: "minimum 2 characters", lettersonly: "only letters please!" }, email: { required: "please enter email address", minlength: "minimum 6 characters", email: "that's invalid email" }, phone: { required: "please enter phone number", digits: "only digits (no spaces)", minlength: "minimum 10 characters", maxlength: "maximum 15 characters" }, message: { required: "please enter 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'>×</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'>×</a>" + response.text + "</div>"); $(ajaxform).find('[name="submit"]').html('<i class="fa fa-paper-plane fa-fw"></i> send'); } } }); return false; } }); the problem whenever click on send button no action performed. neither positive nor negative. nothing happens.
i want send email user on entered email id.
at glance difference between
$(ajaxform).find
and
ajaxform.find
on line below it? correct?
Comments
Post a Comment