php 没有收到来自 ajax 类型帖子的任何请求，是否需要在邮件中提及用户名和密码

Question

I'm working on contact page form to send emails.

I have written HTML form to get user details and performing form validations in contactform.js file. In the same JavaScript file I have written ajax POST call to call contact_mail.php .

I have found many similar questions over the internet but the problem is - in my local machine on form Submit button php is getting called, but this is not happening in remote web server.

If I avoid call to contactform.js by removing class="contactForm" from my form definition, php is getting called but I loose all the validation. :( If i call contactform.js by specifying class="contactForm" in form definition then validation are performed nicely but nothing happens on submit since no call to PHP.

I don't know what am I doing wrong... Here is my code...

HTML form looks like this:

 <form action="contactform/contact_mail.php" method="post" role="form" class="contactForm"> <div class="form-group"> <input type="text" name="name" class="form-control" id="name" placeholder="Your Name" data-rule="minlen:4" data-msg="Please enter at least 4 chars" /> <div class="validation"></div> </div> <div class="form-group"> <input type="email" class="form-control" name="email" id="email" placeholder="Your Email" data-rule="email" data-msg="Please enter a valid email" /> <div class="validation"></div> </div> <div class="form-group"> <input type="phone" class="form-control" name="phone" id="phone" placeholder="Your Contact" data-rule="phone" data-msg="Please enter a valid contact number" /> <div class="validation"></div> </div> <div class="form-group"> <input type="text" class="form-control" name="subject" id="subject" placeholder="Subject" data-rule="minlen:4" data-msg="Please enter at least 8 chars of subject" /> <div class="validation"></div> </div> <div class="form-group"> <textarea class="form-control" name="message" rows="5" data-rule="required" data-msg="Please write something for us" placeholder="Message"></textarea> <div class="validation"></div> </div> <div class="text-center"><button type="submit">Send Message</button></div> </form> </div> </div>

This is my javascript contactform.js file

 jQuery(document).ready(function($) { "use strict"; //Contact $('form.contactForm').submit(function(e) { var f = $(this).find('.form-group'), ferror = false, emailExp = /^[^\\s()<>@,;:\\/]+@\\w[\\w\\.-]+\\.[az]{2,}$/i, phoneExp = ^\\+[0-9]{1,3}\\.[0-9]{4,14}(?:x.+)?$; /*phoneExp = /^\\d{10}$/;*/ f.children('input').each(function() { // run all inputs var i = $(this); // current input var rule = i.attr('data-rule'); if (rule !== undefined) { var ierror = false; // error flag for current input var pos = rule.indexOf(':', 0); if (pos >= 0) { var exp = rule.substr(pos + 1, rule.length); rule = rule.substr(0, pos); } else { rule = rule.substr(pos + 1, rule.length); } switch (rule) { case 'required': if (i.val() === '') { ferror = ierror = true; } break; case 'minlen': if (i.val().length < parseInt(exp)) { ferror = ierror = true; } break; case 'email': if (!emailExp.test(i.val())) { ferror = ierror = true; } break; case 'phone': if (!phoneExp.test(i.val())) { ferror = ierror = true; } break; case 'checked': if (! i.is(':checked')) { ferror = ierror = true; } break; case 'regexp': exp = new RegExp(exp); if (!exp.test(i.val())) { ferror = ierror = true; } break; } i.next('.validation').html((ierror ? (i.attr('data-msg') !== undefined ? i.attr('data-msg') : 'wrong Input') : '')).show('blind'); } }); f.children('textarea').each(function() { // run all inputs var i = $(this); // current input var rule = i.attr('data-rule'); if (rule !== undefined) { var ierror = false; // error flag for current input var pos = rule.indexOf(':', 0); if (pos >= 0) { var exp = rule.substr(pos + 1, rule.length); rule = rule.substr(0, pos); } else { rule = rule.substr(pos + 1, rule.length); } switch (rule) { case 'required': if (i.val() === '') { ferror = ierror = true; } break; case 'minlen': if (i.val().length < parseInt(exp)) { ferror = ierror = true; } break; } i.next('.validation').html((ierror ? (i.attr('data-msg') != undefined ? i.attr('data-msg') : 'wrong Input') : '')).show('blind'); } }); if (ferror) return false; else var str = $(this).serialize(); var action = $(this).attr('action'); if( ! action ) { action = 'contactform/contact_mail.php'; } $.ajax({ type: "POST", url: action, data: str, success: function(msg) { // alert(msg); if (msg == 'OK') { $("#sendmessage").addClass("show"); $("#errormessage").removeClass("show"); $('.contactForm').find("input, textarea").val(""); } else { $("#sendmessage").removeClass("show"); $("#errormessage").addClass("show"); $('#errormessage').html(msg); } } }); return false; }); });

My contact_mail.php file

 <?php /* send mail new*/ /* start - send mail */ require_once('contactform/class.phpmailer.php'); require_once('contactform/PHPMailerAutoload.php'); require_once('contactform/class.smtp.php'); if(isset($_POST["Submit"])) { $name=$_POST['name']; $email=$_POST['email']; $phone=$_POST['phone']; $message=$_POST['message']; $body = '<html><body>'; $body .= '<h2>Customer Enquiry </h2><br>'; $body .= '<table rules="all" style="background-color: #EBF4FA;" cellpadding="10">'; $body .= "<tr><td><strong>Name:</strong> </td><td>" . strip_tags($_POST['name']) . "</td></tr>"; $body .= "<tr><td><strong>Email:</strong> </td><td>" . strip_tags($_POST['email']) . "</td></tr>"; $body .= "<tr><td><strong>Contact No. :</strong> </td><td>" . strip_tags($_POST['phone']) . "</td></tr>"; $body .= "<tr><td><strong>Message:</strong> </td><td>" . strip_tags($_POST['message']) . "</td></tr>"; $body .= "</table>"; $body .= "</body></html>"; $to = "receiver address"; $subject = " Enquiry Form"; $headers = "From: info@xyz.com" . "\\r\\n" . $headers .= "Content-Type: text/html; charset=UTF-8\\r\\n"; $res="OK"; if (mail($to,$subject,$body,$headers)) { return $res; } else { return false; } header( "refresh:0;url=index.html"); }?>

Actually, I am learning php language at beginner level. What should do to send mail successfully and get success or failure message.

Answer 1

It appears the submit form handler is not preventing the default submitted event. Try adding '''e.preventDefault()''' at the start of the handler.