PHP表单和Ajax调用,在表单提交后报告未定义的索引错误

时间:2016-09-19 10:03:06

标签: php ajax forms phpmailer

这是我尝试在我的网站上建立工作联系部分的第二次尝试。在阅读调试php之后,我仍然不知道下一步该做什么。点击提交后,我得到一个"未定义的索引"错误 - 它引用了多行作为问题。

 <?php

// Only process POST reqeusts.
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    // Get the form fields and remove whitespace.
    $name = strip_tags(trim($_POST["name"]));
            $name = str_replace(array("\r","\n"),array(" "," "),$name);
    $email = filter_var(trim($_POST["email"]), FILTER_SANITIZE_EMAIL);
    $message = trim($_POST["message"]);

    // Check that data was sent to the mailer.
    if ( empty($name) OR empty($message) OR !filter_var($email, FILTER_VALIDATE_EMAIL)) {
        // Set a 400 (bad request) response code and exit.
        http_response_code(400);
        echo "Oops! There was a problem with your submission. Please complete the form and try again.";
        exit;
    }

    // Set the recipient email address.
    $recipient = "someone@example.com";

    // Set the email subject.
    $subject = "New contact from $name";

    // Build the email content.
    $email_content = "Name: $name\n";
    $email_content .= "Email: $email\n\n";
    $email_content .= "Message:\n$message\n";

    // Build the email headers.
    $email_headers = "From: $name <$email>";

    // Send the email.
    if (mail($recipient, $subject, $email_content, $email_headers)) {
        // Set a 200 (okay) response code.
        http_response_code(200);
        echo "Thank You! Your message has been sent.";
    } else {
        // Set a 500 (internal server error) response code.
        http_response_code(500);
        echo "Oops! Something went wrong and we couldn't send your message.";
    }

} else {
    // Not a POST request, set a 403 (forbidden) response code.
    http_response_code(403);
    echo "There was a problem with your submission, please try again.";
}

?>

似乎ajax验证工作正常 - 但是一旦我点击提交就会出错。我还将在下面包含HTML。

<form id="ajax-contact" method="post" action="php/mailer.php" role="form">
                  <div class="form-group">
                    <label for="name">Your Name</label>
                    <input type="text" id="name" class="form-control" required>
                  </div>
                  <div class="form-group">
                    <label for="email">Email address</label>
                    <input type="email" id="email" class="form-control" required>
                  </div>
                  <div class="form-group">
                    <label for="message">Message</label>
                    <textarea id="message" rows="5" class="form-control" required></textarea>
                  </div>
                  <button type="submit" class="btn">Submit</button>
                </form>

如果您需要更多信息,请告知我们 - 或者我需要自己调试更多信息。谢谢你的时间!

$(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.
$(form).submit(function(e) {
    // Stop the browser from submitting the form.
    e.preventDefault();

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

    // Submit the form using AJAX.
    $.ajax({
        type: 'POST',
        url: $(form).attr('action'),
        data: formData
    })
    .done(function(response) {
        // Make sure that the formMessages div has the 'success' class.
        $(formMessages).removeClass('error');
        $(formMessages).addClass('success');

        // Set the message text.
        $(formMessages).text(response);

        // Clear the form.
        $('#name').val('');
        $('#email').val('');
        $('#message').val('');
    })
    .fail(function(data) {
        // Make sure that the formMessages div has the 'error' class.
        $(formMessages).removeClass('success');
        $(formMessages).addClass('error');

        // Set the message text.
        if (data.responseText !== '') {
            $(formMessages).text(data.responseText);
        } else {
            $(formMessages).text('Oops! An error occured and your message           could not be sent.');
        }
    });

    });

    });

我添加了ajax。我第一次用HTML修正了页面,它完全符合我的要求。然而,现在,&#34;成功&#34;点击&#34;提交&#34;。

后,该消息将显示在新页面上

2 个答案:

答案 0 :(得分:2)

两个可能的原因

  1. 表单字段中缺少name属性
  2. 未从AJAX提交电话发送数据
  3. 在表单字段

    中解决缺少name属性的问题 表单字段中缺少

    name属性。我已使用name属性更新了表单字段。将表单更新为以下表单并检查您的ajax电话。

    <form id="ajax-contact" method="post" action="php/mailer.php" role="form">
        <div class="form-group">
            <label for="name">Your Name</label>
            <input type="text" id="name" name="name" class="form-control" required>
        </div>
        <div class="form-group">
            <label for="email">Email address</label>
            <input type="email" id="email" name="email" class="form-control" required>
        </div>
        <div class="form-group">
            <label for="message">Message</label>
            <textarea id="message" rows="5" name="message" class="form-control" required></textarea>
        </div>
        <button type="submit" name="submit" class="btn">Submit</button>
    </form>
    

    在ajax Calls

    中发送数据

    在表单字段具有name属性后,更新您的ajax调用以使用这些名称。在ajax请求期间还包括表单字段如下。通过使用$('#ajax-contact').serialize(),它会将所有信息发送到服务器。如果是第一次使用serialize,请使用它。

    Ajax调用示例

    $.ajax({
        url: 'yourdomain.com/php/mailer.php',
        method: 'POST',
        data: $('#ajax-contact').serialize(),
        dataType: 'json',
        success: function() {
            // Your success callback
        },
        error: function() {
            // Your error callback
        }
    });
    

    建议

    与其他建议一样,请使用isset()empty()对值进行严格检查。这是一个很好的做法。如果您之后仍有问题,请使用AJAX通话更新您的问题,我们会尽力为您提供帮助。请告知我们是否适合您。

答案 1 :(得分:1)

正如@RST在评论中所说,你需要给输入字段nameid属性仅用于DOM,JS,HTML锚点和CSS类。它们不会作为POST / GET请求的一部分被发送回来,并且因为PHP知道它们并不存在。

确保将来不会出现此类错误的一种好方法是检查空(或未设置)值。如果它是必填字段,您应该使用empty()来检查此字段,但如果该字段可以是空字符串,那么isset()将是正确的测试方式。
快速而肮脏的例子:

// Test and validate the username, which is a required field.
if (empty ($_POST['username'])) {
    $errors[] = "Username must be specified";
} elseif (!filter_var ($_POST['username'], E_VALIDATE_REGEXP, '/^[A-Za-z0-9]+\\z/u')) {
    $errors[] = "Invalid username specified";
} else {
    $username = $_POST['username'];
}

// Test an optional field like a checkbox, which (if not checked)
// causes the field to be missing from the POST data.
$optional = false;
if (isset ($_POST['checkbox']) && $_POST['checkbox'] == 1) {
    $optional = true;
}

您会注意到我在上面的代码中使用了错误数组,这使得检测(并显示)任何验证失败的情况非常容易。现在你只需要检查所说的数组是否为空,而不是检查每个变量是否包含一个值。有了所有错误随时可用的额外好处,为了更容易列表给用户,应该有什么不妥。

我想指出的另一件事是,你使用的是strip_tags()。这不会帮助您防止SQL注入,也不会为您提供足够的防御XSS攻击的保护。因此应避免使用它,而采用适当的技术。例如,在向HTML输出添加内容时使用htmlspecialchars(),或在将内容发送到数据库时准备好语句。