whr2206 whr2206 - 2 months ago 5
PHP Question

PHP Forms and Ajax calls, reports undefined index error after form submit

This is my second attempt in trying to make a working contact section on my website. After reading up on debugging php I still don't know what to do next. After hitting submit I get an "undefined index" error -- and it cites multiple lines as the problem.

<?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.";
}

?>


It seems like the ajax validation is working -- but once I hit submit there's an error. I'll include the HTML below as well.

<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>


Please let me know if you need more information -- or if I need to debug this more on my own. Thanks for your time!

Answer

Two Possible Reasons

  1. Missing name attribute in form fields
  2. Data not being sent from AJAX submit call

Address missing name attribute in form fields

name attribute missing from form fields. I have updated your form fields with name attribute. Update your form to the below form and check your ajax calls.

<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>

send data in ajax Calls

After your form field has name attribute, update your ajax call to utilize those name. During ajax request also include the form fields as follows. By using $('#ajax-contact').serialize() it will send all the information to the server. Play with it if its your first time with serialize.

Example Ajax Call

$.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
    }
});

Suggestions

Also like other suggested, implement the strict check of the values with isset(), empty(). It's a good practice. If you still have problem after it please update your question with AJAX calls and we'll try to help you. Please let us know whether it worked for you or not.