自定义AJAX发送邮件形式

我得到这个HTML表单代码：自定义AJAX发送邮件形式

 <form id="main-contact-form" name="contact-form"> 
      <div class="row wow fadeInUp" data-wow-duration="1000ms" data-wow-delay="300ms"> 
       <div class="col-sm-6"> 
       <div class="form-group"> 
        <input type="text" id="name" name="name" class="form-control" placeholder="Name" required> 
       </div> 
       </div> 
       <div class="col-sm-6"> 
       <div class="form-group"> 
        <input type="email" id="email" name="email" class="form-control" placeholder="Email Address" required> 
       </div> 
       </div> 
      </div> 
      <div class="form-group"> 
       <input type="text" id="subject" name="subject" class="form-control" placeholder="Subject" required> 
      </div> 
      <div class="form-group"> 
       <textarea name="message" id="message" class="form-control" rows="4" placeholder="Enter your message" required></textarea> 
      </div>       
      <div class="form-group"> 
       <button type="submit" class="btn-submit">Send Now</button> 
      </div> 
      </form>

和相应的jQuery代码，我认为它发出的信息：

// Contact form 
var form = $('#main-contact-form');  
form.submit(function(event){ 
    event.preventDefault(); 

    var form_status = $('<div class="form_status"></div>'); 
    $.ajax({ 
     url: $(this).attr('action'), 
     beforeSend: function(){ 
      form.prepend(form_status.html('<p><i class="fa fa-spinner fa-spin"></i> Email is sending...</p>').fadeIn()); 
     } 
    }).done(function(data){ 
     form_status.html('<p class="text-success">Thank you for contact us. As early as possible we will contact you</p>').delay(3000).fadeOut(); 
    }); 
});

当我提交表单我啥都没在我的webmail中。任何人都可以发现问题吗？

谢谢

来源

2016-04-05 James Thompson

在您的浏览器的调试工具中，是否发出了AJAX请求？它是否有你期望的数据？服务器的回应是什么？我没有真正看到代码中的任何数据实际上被发送到服务器。您也没有包含任何实际发送*电子邮件的服务器端代码... – David

那么你应该告诉我你要使用ajax。所以，你应该这样做：

在怨妇的jQuery：

// Contact form 
var form = $('#main-contact-form');  
form.submit(function(event){ 
    event.preventDefault(); 

    var name = $('#name').val(); 
    var subject = $('#subject').val(); 
    var email = $('#email').val(); 
    var message = $('#message').val();   

    var form_status = $('<div class="form_status"></div>'); 
    $.ajax({ 
     url: $(this).attr('action'), 
     type: 'POST', 
     data: {name: name, subject:subject, email:email, message:message }, 
     beforeSend: function(){ 
      form.prepend(form_status.html('<p><i class="fa fa-spinner fa-spin"></i> Email is sending...</p>').fadeIn()); 
     } 
    }).done(function(data){ 
     form_status.html('<p class="text-success">Thank you for contact us. As early as possible we will contact you</p>').delay(3000).fadeOut(); 
    }); 
});

，并在你的HTML离开它，因为它是。

告诉我，如果它帮助。

来源

2016-04-05 15:08:58 Arizona2014

自定义AJAX发送邮件形式

回答

相关问题