execute php mail function through ajaxsubmit for contact form without redirecting to php file

Question

function contactForm(){
 function e(e){
  var t=/^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
  return t.test(e)
 }
 $(".js-contact-form").submit(function(){
  $(this).ajaxSubmit({
   data:{
    email:$(".js-contact-email").text().replace(/(\r\n|\n| \r)/gm,"").replace(/\s+/g," "),
    user_message:$(".js-mail-message").text().replace(/(\r\n| \n|\r)/gm,"").replace(/\s+/g," ")
    },
   beforeSubmit:function(t,n,r){
    var i=$(".js-contact-email"),s=$(".js-contact-name"),o= $(".js-contact-subject"),u=$(".js-contact-brief"),a=1;
     i.removeClass("js-error");s.removeClass("js- error");o.removeClass("js-error");u.removeClass("js-error");
     if(i.text()===i.data("placeholder")){i.addClass ("js-error");a=0}else if(!e(i.text())){i.addClass("js-error");a=0}if(s.text()===s.data ("placeholder")){s.addClass("js-error");a=0}if(o.text()===o.data("placeholder")) {o.addClass("js-error");a=0}if(u.text()===u.data("placeholder")){u.addClass("js- error");a=0}if(!a)return!1},
   success:function(e){
    $(".js-mail-message").addClass("js-hidden");
    $(".js-contact-submit").addClass("js-hidden");
    $(".js-mail-success").removeClass("js-hidden")
   }
  });return!1})
}

<form action="http://naiknikunj.me/theme/6/email.php" name="contactform" id="contactform"  accept-charset="utf-8" class="contact-form js-contact-form" method="post">
     <div class="row">
      <div class="col-md-10 col-md-offset-1">
      <p class="mail-message  js-mail-message">Hi  my name is <span class="contact_name  js-contact-name" data-placeholder="Your Name Goes  Here" contenteditable="true">Your Name Goes Here</span> and i am looking for 
      <span class="contact_subject  js-contact- subject" data-placeholder="website for my existing business" contenteditable="true">website  for my existing business</span>. you can reach me on 
      <span class="contact_email  js-contact- email" data-placeholder="YourEmailId@DomainName.com"  contenteditable="true">YourEmailId@DomainName.com</span>. Here's a quick outline of what  I'm after: 
      <span class="contact_brief  js-contact- brief" data-placeholder="Project Requirement goes Here" contenteditable="true">Project  Requirement goes Here</span>. 
      I look forward to hearing from you.</p>
      <p class="mail-message  js-mail-success   js-hidden">Thank you. We have received your message and will be in touch with you  shortly.</p>
        <button class="btn btn- default js-contact-submit">Send Mail <i class="sendmsg fa fa-location-arrow"></i></button>
      </div>
     </div>
    </form>

What is happening now is upon entering all fields message (Thank you. We have received your message and will be in touch with you shortly.) gets displayed and when no fields are entered text comes in red color. All the above things must work as it is and along with that mail should also work. Suppose i have php mail function code in phpurl.php file, then how to stay on the contact form page itself and make the mailing part happen without page being redirected to phpurl.php.

Answer 1

Why not use something like (assuming you've already validated the form)

$(".js-contact-form").submit(function(e) {
    e.preventDefault();
    $.ajax({
        type:'POST', 
        url: 'php/secure-email.php', 
        data:$('#contactform').serialize(), 
        success: function(response) {
            $(".js-mail-message").addClass("js-hidden");
            $(".js-contact-submit").addClass("js-hidden");
            $(".js-mail-success").removeClass("js-hidden");
        },
        complete:function() {
            $('#contactform').each(function() {
                this.reset();
            });
        }
    });
});

Then in your php file use the $_POST vars for your mail and if the mail is sent you just echo true

Answer 2

Try adding "allow-forms" to the sandbox attribute in your <iframe> tag instead of "allow-script", to allow form submission.. It should work.