个人中心
gpt4 book ai didi

javascript - 无法通过ajax发送电子邮件

转载 作者：行者123 更新时间：2023-11-28 04:49:17 30 4
gpt4 key购买 nike

<分区>

我需要帮助来找出我在做什么错误，因为我正在尝试开发一个使用 php 和 ajax 从 HTML 表单发送电子邮件的功能，我面临的问题是每当我点击页面上的提交按钮时令人耳目一新，通常我们在javascript脚本中看到，应该会收到一条消息显示发送成功

最好的问候，

PHP 文件:

<?php
if (isset($_REQUEST['email']))  {
    //Email information
    $admin_email = "basselbizri@gmail.com";
    $name = $_REQUEST['first_name'];
    $email = $_REQUEST['email'];
    $message = $_REQUEST['message'];

    //send email
    if (mail($admin_email, $name, $message, "From:" . $email)) {
        echo 1;
    }
    else {
        echo 0;
    }
}
?>

HTML 表单:

<form class="inline" id="contactForm" method="post" >
   <div class="row">
       <div class="col-sm-6 height-contact-element">
           <div class="form-group">
               <input type="text" name="first_name" class="form-control custom-labels" id="name" placeholder="FULL NAME" required data-validation-required-message="Please write your name!"/>
               <p class="help-block text-danger"></p>
           </div>
       </div>
       <div class="col-sm-6 height-contact-element">
           <div class="form-group">
               <input type="email" name="email" class="form-control custom-labels" id="email" placeholder="EMAIL" required data-validation-required-message="Please write your email!"/>
               <p class="help-block text-danger"></p>
           </div>
       </div>
       <div class="col-sm-12 height-contact-element">
           <div class="form-group">
               <input type="text" name="message" class="form-control custom-labels" id="message" placeholder="WHAT'S ON YOUR MIND" required data-validation-required-message="Please write a message!"/>
           </div>
       </div>
       <div class="col-sm-3 col-xs-6 height-contact-element">
           <div class="form-group">
               <input type="submit" class="btn btn-md btn-custom btn-noborder-radius" value="Send It"/>
           </div>
       </div>
       <div class="col-sm-3 col-xs-6 height-contact-element">
           <div class="form-group">
               <button type="button" class="btn btn-md btn-noborder-radius btn-custom" name="reset">RESET
               </button>
           </div>
       </div>
       <div class="col-sm-3 col-xs-6 height-contact-element">
           <div class="form-group">
               <div id="response_holder"></div>
           </div>
       </div>
       <div class="col-sm-12 contact-msg">
       <div id="success"></div>
       </div>
   </div>
</form>

JS 脚本:

$('#contactForm').on('submit', function(e){
            e.preventDefault();
            e.stopPropagation();

            // get values from FORM
            var name = $("#name").val();
            var email = $("#email").val();
            var message = $("#message").val();
            var goodToGo = false;
            var messgaeError = 'Request can not be send';
            var pattern = new RegExp(/^(('[\w-\s]+')|([\w-]+(?:\.[\w-]+)*)|('[\w-\s]+')([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i);


             if (name && name.length > 0 && $.trim(name) !='' && message && message.length > 0 && $.trim(message) !='' && email && email.length > 0 && $.trim(email) !='') {
                  if (pattern.test(email)) {
                     goodToGo = true;
                  } else {
                     messgaeError = 'Please check your email address';
                     goodToGo = false; 
                  }
             } else {
               messgaeError = 'You must fill all the form fields to proceed!';
               goodToGo = false;
             }


            if (goodToGo) {
               $.ajax({
                 data: $('#contactForm').serialize(),
                 beforeSend: function() {
                   $('#success').html('<div class="col-md-12 text-center"><img src="images/spinner1.gif" alt="spinner" /></div>');
                 },
                 success:function(response){
                   if (response==1) {
                     $('#success').html('<div class="col-md-12 text-center">Your email was sent successfully</div>');
                     window.location.reload();
                   } else {
                     $('#success').html('<div class="col-md-12 text-center">E-mail was not sent. Please try again!</div>');
                   }
                 },
                 error:function(e){
                   $('#success').html('<div class="col-md-12 text-center">We could not fetch the data from the server. Please try again!</div>');
                 },
                 complete: function(done){
                   console.log('Finished');
                 },
                 type: 'POST',
                 url: 'js/send_email.php', 
               });
               return true;
            } else {
               $('#success').html('<div class="col-md-12 text-center">'+messgaeError+'</div>');
               return false;
            }
            return false;
        });
    });

30 4 0
文章推荐： javascript - 在表中使用 .closest 隐藏行
文章推荐： javascript - react +还原。我可以通过this.props.children派发一个将包含一个组件并让另一个组件进行渲染的 Action 吗？
文章推荐： javascript - ContentEditable div 在 JS fiddle 中无法正常工作
文章推荐： javascript - Contenteditable div 不起作用
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com