Question

So I have a contact field which sends an email when submitted, I want to have the javascript alert when complete but am returning issues.

The javascript:

jQuery(document).ready(function() {

    $.ajax({
        url: './contactengine.php',
        type: 'GET',
        dataType: 'JSON',
        success: function(response) {
                        alert("GOOD");
                },
        error: function() {
                        alert("BAD");
                }
    });

});

The php:

<?php

$EmailFrom = "[e-mail]";
$EmailTo = "[e-mail]";
$Subject = "new contact from website";
$Name = Trim(stripslashes($_POST['Name'])); 
$company = Trim(stripslashes($_POST['company'])); 
$Email = Trim(stripslashes($_POST['Email'])); 
$Message = Trim(stripslashes($_POST['Message'])); 

// validation
$validationOK=true;
if (!$validationOK) {
  print "<meta http-equiv=\"refresh\" content=\"0;URL=error.htm\">";
  exit;
}

// prepare email body text
$Body = "";
$Body .= "Name: ";
$Body .= $Name;
$Body .= "\n";
$Body .= "company: ";
$Body .= $company;
$Body .= "\n";
$Body .= "Email: ";
$Body .= $Email;
$Body .= "\n";
$Body .= "Message: ";
$Body .= $Message;
$Body .= "\n";

// send email 
$success = mail($EmailTo, $Subject, $Body, "From: <$EmailFrom>");

// redirect to success page 
if ($success)
{
    $result = array('success' => true);
}
else
{
    $result = array('success' => false, 'message' => 'Something happened');
    header($_SERVER['SERVER_PROTOCOL'] . ' 500 Internal Server Error', true, 500);
}
  echo json_encode($result);
?>

When I submit the form I get redirected to a page which says the following:

{"success":true}

When I should be staying on the same page and just alerting good.

Answer 1

The problem here is in your script I think, from the behaviour you describe it sounds like your PHP is doing the job.

I’ve made a few corrections to the ajax call based on the PHP code, try this and see if it helps.

$.ajax({
        url: 'contactengine.php', //removed ./ - that's wrong I think
        type: 'POST',  //you are accessing $_POST not $_GET in the PHP file
        data: $('myform').serialize(), //you need to send some data atleast
        dataType: 'JSON',
        success: function(response) {
                        alert("GOOD");
                },
        error: function() {
                        alert("BAD");
                }
    });

What I’ve done is removed ./ from the front of your URL – it should be either nothing, / for the root directory, or ../ for one directory up from the current directory. If the file is in the same directory as your page, keep it like I’ve done.

I’ve changed type from GET to POST – you are accessing the PHP $_POST global in your script, so the PHP would have been looking in the wrong place for variables.

Last but not least, I’ve put some data in. You need to pass in those variables that the PHP expects – so I’ve used a serialize() call. Replace the jQuery selector so that it will target your form, and it should pass in everything in your form to the PHP.

For more detail on the jQuery ajax function, see here: http://api.jquery.com/jQuery.ajax/

Hope this helps