联系表格不发送（未定义）[重复]

Question

我有一个表格，我希望将其发送到我的电子邮件。这是我的 HTML 脚本，格式为：

<form id="contact-form" class="contact-form style-2">
  <div class="form-row">
    <div class="form-col-2">
      <input type="text" name="cf-name" placeholder="Naam*">
    </div>
    <div class="form-col-2">

      <input type="text" name="cf-email" placeholder="Email*">

    </div>
  </div>

  <div class="form-row">
    <div class="form-col-2">

      <input type="tel" name="cf-phone" placeholder="Telefoonnummer">

    </div>
    <div class="form-row">
      <div class="form-col">

        <textarea name="cf-message" rows="2" placeholder="Vragen/verzoeken"></textarea>

      </div>
    </div>

    <button type="submit" class="btn style-3" data-type="submit">Verzend</button>
    <p class="text-size-small2">Velden met een * zijn vereist.</p>

</form>

我想使用 AJAX，这是我的脚本。

if ($('#contact-form').length) {

  var cf = $('#contact-form');
  cf.append('<div class="message-container"></div>');

  cf.on("submit", function (event) {

    var self = $(this),
      text;

    var request = $.ajax({
      url: "bat/mail.php",
      type: "post",
      data: self.serialize()
    });

    request.then(function (data) {
      if (data == "1") {

        text = "Your message has been sent successfully!";

        cf.find('input:not([type="submit"]),textarea').val('');

        $('.message-container').html('<div class="alert-box success"><i class="icon-smile"></i><p>' + text + '</p></div>')
          .delay(150)
          .slideDown(300)
          .delay(4000)
          .slideUp(300, function () {
            $(this).html("");
          });

      } else {
        if (cf.find('textarea').val().length < 10) {
          text = "Message must contain at least 10 characters!"
        }
        if (cf.find('input').val() == "") {
          text = "All required fields must be filled!";
        }
        $('.message-container').html('<div class="alert-box error"><i class="icon-warning"></i><p>' + text + '</p></div>')
          .delay(150)
          .slideDown(300)
          .delay(4000)
          .slideUp(300, function () {
            $(this).html("");
          });
      }
    }, function () {
      $('.message-container').html('<div class="alert-box error"><i class="icon-warning"></i><p>Connection to server failed!</p></div>')
        .delay(150)
        .slideDown(300)
        .delay(4000)
        .slideUp(300, function () {
          $(this).html("");
        });
    });

    event.preventDefault();

  });

}

这是我的 PHP 文件：

<?php

    $user_email = "fr.sven.fr@hotmail.com";

    $mail = array(
        "name" => htmlspecialchars($_POST['cf-name']),
        "email" => htmlspecialchars($_POST['cf-email']),
        "subject" => htmlspecialchars($_POST['cf-subject']),
        "message" => htmlspecialchars($_POST['cf-message'])
    );

    function validate($arr){

        return !empty($arr['name']) && strlen($arr['message']) > 20 && filter_var($arr['email'],FILTER_VALIDATE_EMAIL);

    }

    if(validate($mail)){

        echo mail($user_email, $mail['subject'],
            "Name : {$mail['name']}\n"
            ."E-mail : {$mail['email']}\n"
            ."Message : {$mail['message']}"
        );

    }


?>

当我提交文件而不输入表单时，我得到了正确的错误。当我填写少于 10 个字符的消息时，我得到了正确的错误，但是当我正确填写所有内容时，我得到了错误：

Notice: Undefined index: cf-name in /Applications/MAMP/htdocs/Klus spanje/php/mail.php on line 7

Notice: Undefined index: cf-email in /Applications/MAMP/htdocs/Klus spanje/php/mail.php on line 8

Notice: Undefined index: cf-subject in /Applications/MAMP/htdocs/Klus spanje/php/bat/mail.php on line 9

Notice: Undefined index: cf-message in /Applications/MAMP/htdocs/Klus spanje/php/bat/mail.php on line 10 

我不知道我做错了什么，有人可以帮忙吗？

Answer 1

编辑：

啊，你现在添加了 php 错误，太好了！

所以它没有看到正确的帖子变量。由于您没有提供表单的 html（下次会有所帮助！）我只能为您提供一种自己解决问题的方法:)

要找出发布的正确名称，您可以使用

print_r($_POST);

在您的 php 代码中。这将显示从客户端发送的键值对。很可能键与您想象的有点不同，但是将它们更改为上述代码打印的键应该可以解决此错误！

原创：（因为我为制作截图而自豪；））

我的猜测是，php 返回的数据不完全是"1"。您可以在 chrome 控制台中的 network 选项卡下确认：

绿色圆圈只是查找javascript发出的请求。 您也可以使用console.log(data);，但是我制作这个屏幕截图是为了什么？ ;)

现在你的代码的问题是，当你的 javascript 没有得到 "1" 时，它会得到这个代码（我用 cmets）

// These two conditions are both not met (as you fill in the form correctly)
if(cf.find('textarea').val().length < 10){
    // So text doesn't get set here
    text = "Message must contain at least 10 characters!"
}
if(cf.find('input').val() == ""){
    // Neither does this one
    text = "All required fields must be filled!";
}

// So at this point, the variable `text` has not gotten any value assigned,
// making it `undefined`. Which wouldn't be a problem,
// if it weren't for the fact you try to use it as is in the html here
$('.message-container').html('<div class="alert-box error"><i class="icon-warning"></i><p>'+text+'</p></div>')
    .delay(150)
    .slideDown(300)
    .delay(4000)
    .slideUp(300,function(){
        $(this).html("");
    });

您现在可以做的至少是提供默认错误消息：

    $('.message-container').html('<div class="alert-box error"><i class="icon-warning"></i><p>'+(text || 'Default error message')+'</p></div>')

但事情是要么

1. 让 php 返回正确的值并在没有错误的情况下运行，如果这已经在工作了
2. 确保 javascript 匹配正确的数据，数据中没有任何空格。也许甚至使用data.trim()（删除字符串开头和结尾的空格）在这里也能有所帮助。

希望这能给你一个开始调试问题的好点:)