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错误，太棒了！

因此看不到正确的post变量。由于您没有提供表单的html（下次会有所帮助！），我只能为您提供一种自行解决的方法：）

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

print_r($_POST);

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

原文：（因为我为制作屏幕截图而感到自豪；））

我的猜测是，php返回的数据不完全是"1"。您可以在Chrome控制台的网络下的网络标签下确认：

绿色圆圈仅用于查找javascript发出的请求。您也可以使用console.log(data);，但是该屏幕截图的用途是什么？ ;）

现在，您的代码存在的问题是，当您的JavaScript没有得到"1"时，它将到达该代码（带有我的评论）

// 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>')

但是要么是

使php返回正确的值并运行而不会出现错误，并且如果该错误已经生效
确保javascript确实匹配正确的数据，并且数据中没有任何空格。甚至使用data.trim()（它会删除字符串开头和结尾的空格）在这里可能会有所帮助。

希望这为您提供了调试该问题的好方法：）

联系人表格未发送（未定义）

1 个答案: