【问题标题】:Form using jQuery AJAX PHP does not send field input in email使用 jQuery AJAX PHP 的表单不会在电子邮件中发送字段输入
【发布时间】:2015-07-05 09:29:22
【问题描述】:

我有这个联系表,我正在尝试使用 jQuery/AJAX 和 PHP 将字段输入值通过电子邮件发送给我。嗯,电子邮件发送给我就好了,但没有任何字段输入。电子邮件只是 PHP mail() 函数的 $to 和 $subject。请看下面的代码。欢迎任何想法、批评或建议。感谢您的帮助!

$(document).ready(function() {    

$(function() {

// Get the form.
var form = $('#ajax-contact');

// Get the messages div.
//var formMessages = $('#form-messages');

// Set up an event listener for the contact form.
$("button").click(function(e) {

    // Stop the browser from submitting the form.
    e.preventDefault(e);

    // Serialize the form data.
    var formData = $(form).serialize();

    // Submit the form using AJAX.
    $.ajax({
        type: 'POST',
        url: $(form).attr('action'),
        data: formData,
        success: function(result){
            $('#contact-name').val('');
            $('#contact-email').val('');
            $('#contact-website').val('');
            $('#contact-message').val('');
        },
        error: function(xhr,status,error){

        }
    });


});

});

});

<?php
require_once 'swiftmailer/lib/swift_required.php';

//Swift Mailer script

$filter = FILTER_SANITIZE_STRING;

//Grab POST Data
$name = filter_var($_POST['contact-name'], $filter);
$email = filter_var($_POST['contact-email'], FILTER_SANITIZE_EMAIL);
$website = filter_var($_POST['contact-website'], FILTER_SANITIZE_URL);
$message = filter_var($_POST['contact-message'], $filter);


//Create email body
$body = "Name: " . $name . "<br />" . "Email: " . $email . "<br />" .   "Website: " . $website . "<br />" . "Message: " . $message;

//Create Transport
$transport = Swift_SmtpTransport::newInstance("host", "port", "security")
->setUsername("username")
->setPassword("password");

//Create Mailer
$mailer = Swift_Mailer::newInstance($transport);
$message = Swift_Message::newInstance('New Form')
->setFrom(array("email" => "Lead from Contact form"))
->setTo(array('email', 'email' => 'Recipients'))
->setSubject('You have a new message!')
->setBody($body, 'text/html');

//Send Message
$result = $mailer->send($message);

if ($result) {

// 设置一个 200(好的)响应码。 //http_response_code(200); echo "谢谢!您的信息已发送。"; } 别的 { // 设置 500(内部服务器错误)响应代码。 //http_response_code(500); echo "糟糕!出了点问题,我们无法发送您的消息。"; }

?>

【问题讨论】:

    标签: javascript php jquery ajax forms


    【解决方案1】:

    使用val() 函数从输入中获取数据

    $(document).ready(function(e) {
    
    $("button").click(function(e) {
    e.preventDefault();
        var ajax = {
            isSubmitting: false,
            send: function() {
                if(ajax.isSubmitting == false) {
    
                    ajax.isSubmitting = true;
                    var userName = $('input[name="contact-name"]').val(); 
                    var userEmail = $('input[name="contact-email"]').val(); 
                    var userWebsite = $('input[name="contact-website"]').val(); 
                    var userMessage = $('input[name="contact-message"]').val(); 
    
                    if(userName === "" || userEmail === "" || userWebsite === "" || userMessage === "") {
                        alert("Please fill out all required fields.");
                    } 
                    else {
                        $.post("mailer3.php", {
                            name: userName,
                            email: userEmail,
                            website: userWebsite,
                            message: userMessage
    
                        }, function(data) {
    
                            ajax.isSubmitting = false;
    
                        });
                    }
                }
                else alert("Send only 1 email at a time.");
            }
        }
    
    });
    

    使用 $.ajax 试试这个:

    $("button").click(function(){
         isSubmitting: false;
         var userName = $('input[name="contact-name"]').val(); 
         var userEmail = $('input[name="contact-email"]').val(); 
         var userWebsite = $('input[name="contact-website"]').val(); 
         var userMessage = $('input[name="contact-message"]').val(); 
    
        if(isSubmitting == false) {
    
        $.ajax({url: "mailer3.php",
                type:'POST',
                data:{
                name: userName,
                email: userEmail,
                website: userWebsite,
                message: userMessage
                 },
                success: function(result){
                   isSubmitting == true;
                },error(xhr,status,error){
                   isSubmitting == false;
                }
        });
    
        }
    });
    

    【讨论】:

    • 感谢您的建议。我试过了,但字段输入值仍然没有出现在电子邮件中。发件人地址也显示为我的主机帐户用户名@主机 URL,这对我来说似乎很奇怪,或者我对此知之甚少。但是还有其他建议吗?我在 jQuery 中的“名称”属性与我的 HTML 文件匹配,而那些又与我的 PHP 匹配,我不知所措。谢谢!
    • var_dump 帖子值并在响应中查看它们是否正确,如果它们是您的邮件函数和变量有问题
    • madalin ivascu,这是个好主意。那只是在PHP文件的末尾吗?抱歉,对 PHP 不太了解。但这带来了一些有点奇怪的东西。人们通常会在 Firebug 的控制台中看到 POST/Response 等,但我根本没有看到。谢谢!
    • 这意味着您的 ajax 请求没有发生
    • 你调用 ajax 的方法对我来说并不熟悉,从我可以看到你正在用你的 ajax 请求创建一个对象,你为什么不做一个简单的$.ajax 而不是成功你隐藏 ajax 表单并显示 mesaje?
    【解决方案2】:

    因为你没有使用 jQquery val();检索您的输入字段值的方法,这就是您无法获得价值的原因。使用链式方法 val() 调用元素如下所示

    `$(document).ready(function(e) { //e.preventDefault(); $("按钮").click(function(e) {

    var ajax = {
        isSubmitting: false,
        send: function() {
            if(ajax.isSubmitting == false) {
    
                ajax.isSubmitting = true;
                var userName = $("input[name=contact-name]").val(); 
                var userEmail = $("input[name=contact-email]").val(); 
                var userWebsite = $("input[name=contact-website]").val(); 
                var userMessage = $("input[name=contact-message]").val(); 
    
                if(userName === "" || userEmail === "" || userWebsite === "" || userMessage === "") {
                    alert("Please fill out all required fields.");
                } 
                else {
                    $.post("mailer3.php", {
                        name: userName,
                        email: userEmail,
                        website: userWebsite,
                        message: userMessage
    
                    }, function(data) {
    
                        ajax.isSubmitting = false;
    
                    });
                }
            }
            else alert("Send only 1 email at a time.");
        }
    } `
    

    【讨论】:

    • 谢谢,但我确实尝试了这个,令我惊讶的是,它没有用。我认为这是解决方案,但电子邮件中仍然没有数据,只有 $to 和 $subject。还有其他建议吗?提前致谢!
    【解决方案3】:

    我确实最终弄清楚了这一点。我修改后的代码在顶部是我用来发送带有数据的电子邮件的代码。使用 SwiftMailer。只需要完成几件事。感谢大家对此的意见!

    安德鲁

    【讨论】:

      猜你喜欢
      • 2014-05-22
      • 2013-03-01
      • 2017-07-21
      • 1970-01-01
      • 2013-07-17
      • 2021-04-25
      • 1970-01-01
      • 1970-01-01
      • 2015-08-10
      相关资源
      最近更新 更多