AJAX, JSON, PHP Contact form, event.preventDefault Not working and data not being sent through to email

Question

I am trying to set up my contact form to work with json and ajax, to submit all of the form data to my email and show a success message with the person's name, but everytime I submit the form, event.preventDefault does not work and it shows my contact.php page (Which I am using to process the data and is blank). Here are the 3 files.

HTML

    <form id="form" action="contact.php" method="POST">
    <input data-name id="name" type="text" name="name" placeholder=" name" required="required"><br>
    <input data-email id="email" type="email" name="email" placeholder=" email" required="required"><br>
    <select data-projectType id="projectType" name="projectType" required="required">
    <option value="" disabled selected>let's talk about</option>
    <option value="brand">branding</option>
    <option value="web">web design</option>
    <option value="app">app design</option>
    <option value="print">print design</option>
    <option value="dev">development</option>
    <option value="multi">multiple services</option>
    <option value="hello">just saying hello!</option>
    </select>
    <br>
    <label for="budget"></label>
    <select data-budget id="budget" name="budget" required="required">
    <option value="" disabled selected>project budget</option>
    <option value="none">none</option>
    <option value="> $100">less than $100</option>
    <option value="$100-$400">$100 - $400</option>
    <option value="$400-$700">$400 - $700</option>
    <option value="$700-$100">$700 - $1000</option>
    <option value="Negotiate">let's negotiate</option>
    <option value="IDK">i don't know</option>
    </select>
    <br>
    <input data-details id="details" type="text" name="details" placeholder=" project details" required="required"><br>
    <div class=".grid_4">


            <input type="submit" input class="MainCTAContact" input value="DROP ME A LINE"></input>

    </form>

PHP

$name = $_POST['name'];
$email = $_POST['email'];
$projectType = $_POST['projectType'];
$budget = $_POST['budget'];
$details =$_POST['details'];
//email address settings
$to = "heathersheridanodesk@yahoo.com";
$headers = "From: $email";
$subject= "I'd like to discuss $projectType";
$message = "Name: $name\nEmail: $email\nProject Type: $projectType\nBudget: $budget\nDetails: $details";
if ( $name == "")
{
    echo 'Please tell me your name.';
    $result = "Please tell me your name."; 
}
else if (!preg_match("/^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$/", $email))
{
    echo 'Please enter a valid email address.';
    $result = "Please enter a valid email address."; 
}
 else if( $projectType == "")
{
    echo 'Please select project type';
    $result = "Please select project type"; 
    }
  else if( $budget == "")
{
    echo 'Please select your budget.';
    $result = "Please select your budget."; 
    }
    else if ( strlen($details) < 10 )
{
    echo ' Please write at least 10 characters.';
    $result = "Please write at least 10 characters."; 
}
else
{
    mail($to, $subject, $message, $headers);
}
}
?>

JS

$(document).ready(function() {
$('#form').submit(function(event) {
event.preventDefault();
var form = $(this);
$.ajax( {
    type: 'POST',
    contentType: 'application/json',
    dataType: 'json',
    data: form.serialize(),
    url: "contact.php",
    success: function(result) {
        form.remove();
        var msg = $("<p></p>");
        msg.append("Thank you" + data["name"] + ", I'll be in touch soon.")
        $('.sent').html(msg).fadeIn();
    },
});

how do I make this work?

Answer 1

Okay so I took the time to reformat your stuff a little bit with some explanations in the comments of the code, hopefully this helps you out, but you should definitely look into to web tutorials on AJAX and form processing.

FORM

 <form id="form" action="contact.php" method="POST">
    <input id="name" type="text" name="name" placeholder=" name" required><br>
    <input id="email" type="email" name="email" placeholder=" email" required><br>
    <select id="projectType" name="projectType" required>
        <option value="" selected>let's talk about</option>
        <option value="brand">branding</option>
        <option value="web">web design</option>
        <option value="app">app design</option>
        <option value="print">print design</option>
        <option value="dev">development</option>
        <option value="multi">multiple services</option>
        <option value="hello">just saying hello!</option>
    </select>
    <br>
    <label for="budget"></label>
    <select id="budget" name="budget" required="required">
        <option value="" selected>project budget</option>
        <option value="none">none</option>
        <option value="> $100">less than $100</option>
        <option value="$100-$400">$100 - $400</option>
        <option value="$400-$700">$400 - $700</option>
        <option value="$700-$100">$700 - $1000</option>
        <option value="Negotiate">let's negotiate</option>
        <option value="IDK">i don't know</option>
    </select>
    <br>
    <textarea id='details' rows='5'><textarea><br>
    <button type='submit' class='MainCTAContact'>Drop me a line</button>
</form>

JAVASCRIPT

$(document).ready(function() {
    $('#form').submit(function(e) {
    e.preventDefault();
    //create a new object here
    var data = {
        name : $('#name', this).val(),
        email : $('#email', this).val(),
        projectType : $('#projectType', this).val(),
        budget : $('#budget', this).val(),
        details : $('#details', this).val()
    };


    $.ajax({
        type: 'POST',
        dataType: 'json',
        data: data,
        url: "/contact.php",
        success: function(data) {
            if(!data.errors){
                $('#errors').hide();
                $('#form')[0].reset(); //add this just to clear out the user submitted data
                $('#form').hthml(data.message)); //rather than remove this just sets its visibility to none. Remove complete destroys the element which might not be desierable in all cases
            }else{
                $('#form').before('<p id='errors' style='color: #ff0000;'>'+data.errorMessage+'</p>');
            }
        }
       });
  });
});

Finally your PHP

<?php
    $name = $_POST['name'];
    $email = $_POST['email'];
    $projectType = $_POST['projectType'];
    $budget = $_POST['budget'];
    $details =$_POST['details'];

    //add in a blank error message the error count, and the return array
    $errors = 0;
    $errorMessage = "";
    $resposne = array();
    $response['errors']  = false; //initialize the response boolean



    if (empty($name)){
        $errorMessage .= 'Please tell me your name<br>';
    }
    if(!preg_match("/^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$/", $email)){
        $errorMessage .= 'Please enter a valid email address<br>';
    }
    if(empty($projectType)){
        $errorMessage .= 'Please select project type<br>';
    }
    if(empty($budget)){
        $errorMessage .= 'Please select your budget.<br>';
    }
    if(empty($details) || strlen($details) < 10){
        $errorMessage .= "Please make sure your message is at least 10 characters long<br>";
    }

    if(!empty($errorMessage)){
        $response['errors'] = true;
        $response['errorMessage'] = "There were some errors when processing your form <br> $errorMessage";
    }else{
        $to = "heathersheridanodesk@yahoo.com";
        $headers = "From: $email";
        $subject= "I'd like to discuss $projectType";
        $message = "Name: $name\nEmail: $email\nProject Type: $projectType\nBudget: $budget\nDetails: $details";

        mail($to, $subject, $message, $headers);
        $response['message'] = "Thank you, $name, I will be in touch with you soon!";
    }

    echo json_encode($resposne) // this is needed inorder for the ajax to retrieve the data from the server

?>

Pretty much what you need to remember is the following:

• form controls i.e. inputs, textareas, etc only need a minimum amount of information, type and id.
• most form control options like disabled, require, readonly, can be put in just using those keywords, so you don't need to do things like disabled='disabled'
• when using the $.ajax in jquery you only need in this situation, url, type, data, dataType, success
• in the PHP organize your data cleanly so that the code is easier to read later on
• when working with ajax you must store everything in a single response array, and echo that encoded array back to the server on completion, other wise you will not be able to retrieve that data.