jQuery/Ajax - return false and preventDefault, produce different results but neither works

Question

*edited for words and added all relevant php

I am trying to send post data to a PHP script, which then populates a form and loads it into the current page.

When I use this script, the action from the form still fires and I am redirected to the new page, but I get this information returned -

string(99) "DATE=2014-12- 03+09%3A08%3A54&F_NAME=Johnny&M_NAME=Darby&L_NAME=Cache&dailyClient=Johnny+Darby+Cache"

$(document).ready(function(){
    $(".clientSubmit").submit(function(event){
        event.preventDefault();
        var clientInformation = $(this).serialize();
        console.log(clientInformation);
    $.ajax({
        type: 'POST',
        url: 'IRCpopulatecheckin.php';
        data: clientInformation,
        cache: false,
        success: function(result){
            $('#clientform').load("IRCpopulatecheckin.php");
            alert(clientInformation);
            } // end result
        }); // end .ajax
    }); // end .submit
}); // end ready

On the other hand, this script loads the form into the current page, but the php returns -

string(0) "" NULL

Notice: Undefined index: DATE in /Library/WebServer/Documents/IRC/IRCpopulatecheckin.php on line 353

Notice: Undefined index: F_NAME in /Library/WebServer/Documents/IRC/IRCpopulatecheckin.php on line 354

Notice: Undefined index: M_NAME in /Library/WebServer/Documents/IRC/IRCpopulatecheckin.php on line 355

Notice: Undefined index: L_NAME in /Library/WebServer/Documents/IRC/IRCpopulatecheckin.php on line 356

$(document).ready(function(){
    $(".clientSubmit").submit(function() {
        var clientInformation = $(this).serialize();
        console.log(clientInformation);
    $.ajax({
        type: 'POST',
        url: 'IRCpopulatecheckin.php',
        data: clientInformation,
        cache: false,
        success: function(result){
            $('#clientform').load("IRCpopulatecheckin.php");
            alert(clientInformation);
            } // end result
        }); // end .ajax
    return false;
    }); // end .submit
}); // end ready

As far as I can tell the only difference between the two pieces of code is whether I use return false or preventDefault, but neither works. I have no idea where to go from here.

*php

$result = file_get_contents('php://input');
var_dump($result);

$DATE   = isset($_GET['DATE'])   ? $_GET['DATE']   : $_POST['DATE'];
$F_NAME = isset($_GET['F_NAME']) ? $_GET['F_NAME'] : $_POST['F_NAME'];
$M_NAME = isset($_GET['M_NAME']) ? $_GET['M_NAME'] : $_POST['M_NAME'];
$L_NAME = isset($_GET['L_NAME']) ? $_GET['L_NAME'] : $_POST['L_NAME'];

Answer 1

If you want the returned HTML from the IRCpopulatecheckin.php after you made a POST request to it, you should change your script to replace the $('#clientform') content with the returned HTML.

$(document).ready(function(){ $(".clientSubmit").submit(function(event) { event.preventDefault(); var clientInformation = $(this).serialize(); console.log(clientInformation); $.ajax({ type: 'POST', url: 'IRCpopulatecheckin.php', data: clientInformation, cache: false, dataType: "html", success: function(result){ $('#clientform').html(result); // Replaces the clientform with the HTML return by the php script } // end result }); // end .ajax }); // end .submit }); // end ready