Jerry Jerry - 3 months ago 14
jQuery Question

Sent data using AJAX but PHP outputs undefined_index

This has probably been answered already, but I can't seem to find a solution. I'm pretty sure I've been all over the internet.

I'm trying to send a mail from a form using AJAX. The AJAX script seems to be working fine. Here's the code:

$("#order").submit(function(e) {
e.preventDefault();
$(".loading-text").fadeIn("500");
var title = $("input#title").val();
var price = $("input#price").val();
var name = $("input#name").val();
var email = $("input#email").val();
var phone = $("input#phone").val();
var address = $("input#address").val();
var urgency = $("input#urgency").val();

$.ajax({
url: "assets/order.php",
type: "POST",
dataType: "json",
data: {
title: title,
price: price,
name: name,
email: email,
phone: phone,
address: address,
urgency: urgency
},
cache: false,
processData: false,

success: function(data) {
$(".loading-text").fadeOut("300");
$(".success-text").fadeIn("500").append(data);
},

error: function(data) {
$(".loading-text").fadeOut("300");
$(".failure-text").fadeIn("500").append(data);
}
});
});


It returns undefined_index for all the variables however. Here's the PHP script:

<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$name = htmlspecialchars($_POST['name']);
$email = filter_var($_POST['email'], FILTER_SANITIZE_EMAIL);
$title = htmlspecialchars($_POST['title']);
$price = htmlspecialchars($_POST['price']);
$phone = htmlspecialchars($_POST['phone']);
$address = htmlspecialchars($_POST['address']);
$urgency = htmlspecialchars($_POST['urgency']);
$to1 = "jerryasih@gmail.com";
$to2 = "shalomdickson@yahoo.com";
$subject = "New order received!";

$msg_stalker = "Hello STALKER! New order received.\n\n"."Here are the details:\n"."Name: $name\n\nAddress: $address\n\nEmail: $email\n\nPhone number: $phone\n\nItem: $title\n\nPrice: $price\n\nThis customer needs their service/product in $urgency hours.";
$msg_owner = "Hello! Your store on STALKER! has a new order.\n\n"."Details:\n"."Item: $title\n\nPrice: $price\n\nThis customer needs their service/product in $urgency hours."."You may contact us on hoodstalker@yahoo.com if item is unavailable or for any other query.\n\nExpect us soon.\n\nWe've got your back! ;)";
$from = "Order form at (stores.neighbourhoodstalker.com)";

if (empty($name) || empty($address) || empty($phone)) {
http_response_code(400);
echo "Error! Please check that all required fields have been filled and try again.";
exit;
}

if(mail($to1, $subject, $msg_stalker, 'From: '.$from) && mail($to2, $subject, $msg_owner, 'From: '.$from)) {
http_response_code(200);
echo "Order placed successfully.";
}
else {
http_response_code(500);
echo "Something went wrong. Check your internet connection and try again.";
}
}
else {
http_response_code(403);
echo "There was a problem with your submission. Please try again.";
}
?>


I'm not sure where the problem is now because I used a similar code for a file uploader and it worked perfectly.

Answer

The problem is because of this setting in AJAX,

processData: false,

From the documentation,

processData (default: true)

Type: Boolean

By default, data passed in to the data option as an object (technically, anything other than a string) will be processed and transformed into a query string, fitting to the default content-type "application/x-www-form-urlencoded". If you want to send a DOMDocument, or other non-processed data, set this option to false.

Since you're not sending any DOMDocument or non-processed data, remove this setting processData: false from your AJAX request.

Comments