Event.preventDefault stops php script from submitting correct values

Question

This seems like a fairly simple procedure but I can't seem to properly solve the issue.

Basically this code works as long as event.preventDefault(); is not active. If preventdefault is part of the code php still submits to server but the entries are all blank. What could be causing this to happened? Console.log(formData) still shows correct values even when preventDefault is active.

index.html

  <form id="submit-signup" method="post" action="scripts/form_submit.php">
    <input type="text" name="name" type="text" placeholder="Name" required>
    <input type="email" name="email" type="text" placeholder="Email" required>
    <input type="text" name="phone" type="text" placeholder="Phone Number" required>
    <input class="button-primary" type="submit" value="Sign Up">
  </form>

main.js

window.onload = function(){
  // Form submit
  $('form#submit-signup').submit(function (event) {
    var formData = {
        'name' : $('input[name=name]').val().trim(),
        'email': $('input[name=email]').val().trim(),
        'phone': $('input[name=phone]').val().trim()
    };

    if(formData.name == '' || validateName(formData.name)){
        validationMssg('Please enter a name with only letters');
    } else if (formData.email == '' || !validateEmail(formData.email)){
        validationMssg('Please enter an email address with a correct format: example@email.com');
    } else if (formData.phone == '' || !validatePhone(formData.phone)){
        validationMssg('Please enter a phone number with only digets');
    } else {
        // Clear error mssg
        clearValidationMssg();
        //if no issues attempt to push code
        submitData(formData);
        $('.thanks').show();
        $('form#submit-signup').hide();
        $('.signup-title').hide();
    }

    event.preventDefault();

  });
};


function submitData(formData){
    console.log(formData);
    $.ajax({
        type: 'POST',
        url: 'scripts/form_submit.php',
        data: formData,
        contentType: "application/json; charset=utf-8",
        dataType: 'json'
    });
}

form_submit.php

<?php
  $dbhost = '#####';
  $dbuser = '#####';
  $dbpass = '#####';
  $conn = mysql_connect($dbhost, $dbuser, $dbpass);

  if(!$conn )
  {
     die('Could not connect: ' . mysql_error());
  }

  $name = $_POST['name'];
  $email = $_POST['email'];
  $phone = $_POST['phone'];

  $sql = "INSERT INTO signup ".
     "(id, name, email, phone, timestamp) ".
     "VALUES (NULL, '$name', '$email', '$phone', CURRENT_TIMESTAMP)";

  mysql_select_db('pfcdb');
  $retval = mysql_query( $sql, $conn );
  mysql_close($conn);

?>

tl;dr php script is submitting empty fields when event.preventDefault() is present

Answer 1

The reason why e.preventDefault() is not working is because your ajax is not submitting the request properly.

Change your submitData function

    function submitData(formData){
        console.log(formData);
        $.ajax({
            type: 'POST',
            url: 'scripts/form_submit.php',
            data: formData,
            contentType: 'application/x-www-form-urlencoded; charset=UTF-8',        
            dataType: 'json',
            success: function(response) {
                //$('.thanks').show();
                $('.thanks').html(reponse);
                $('form#submit-signup').hide();
                $('.signup-title').hide();
            },
            error: function() {
                $('.thanks').html('There was an error');
            }
        });
    }