Basic form submission with jquery/ajax not working

I'm new to jquery and ajax. I'm trying to get my first ajax script to work, but it's not working and I need some assistance, please.

I have a php page that is supposed to post to another php page, where the latter will do some processing and get some files to get zipped and download. The user needs to input a starting and ending date, and the second php script will use this information to prepare the data. This functionality works perfectly fine without jquery, but doesn't work when I add jquery.

What do I want to achieve? I want to post in the to the same php page and get the post output in a <div></div> tag.

My first php page contains (downloadPage.php):

<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<form action="doDownload.php" method="post" id="dateRangeID">
<input id='time1' class='input' name="datefield1" style="text-align:center;"/>
<input id='time2' class='input' name="datefield2" style="text-align:center;"/>    
<input type="submit" value="Download Data" name="submit" id="submitButton">
</form>
<div id="result"></div> <!-- I would like it to post the result here //-->

The second page (doDownload.php),

<div id="content">
<?php 
if(isset($_POST['submit']))
{
    $dateVal1      = $_POST['datefield1'];
    $dateVal2      = $_POST['datefield2'];
    if($dateVal1 != $dateVal2)
    {    
        header('Content-Type: application/zip');
        header('Content-disposition: attachment; filename="file.zip"');

        $fullListOfFiles = $downloadFullTmpFolder.$filesList;
        $command = "sudo $ldlib -u myuser /usr/bin/python3 $downloadScriptFile -datadir $gnomeDataDir -time1 $dateVal1C -time2 $dateVal2C -outdir $downloadFullTmpFolder > debug_download.txt 2>&1";
        $output = shell_exec($command);

        $fp = popen('cat '.$fullListOfFiles.' | sudo -u myuser zip -@ -9 - ', 'r');

        $bufsize = 1024;
        $buff = '';
        while( !feof($fp) ) 
        {
            $buff = fread($fp, $bufsize);
            echo $buff;
        }
        pclose($fp);   
    }
    else
    {
        echo("<p>Dates have to be different in order for the download to start.</p>");
    }
}
else
{
    echo("<p>Error: Page called without submit.</p>");
}
?>
</div>

Finally, the jquery part in downloadPage.php, which if I add it doesn't work anymore (which I'd like to learn how to do right, and I mainly learned from the manual of jquery, the last example in the link)

<script>
/* attach a submit handler to the form */
$("#dateRangeID").submit(
function(event) 
{
    event.preventDefault();
    var $form = $(this),
        t1 = $form.find("input[name='datefield1']").val(),
        t2 = $form.find("input[name='datefield2']").val(),
        subm = $form.find("input[name='submit']").val(),
        url = $form.attr('action');
    var posting = $.post(url, { datefield1: t1, datefield2: t2, submit: subm} );

    /* Put the results in a div */
    posting.done(function(data) {
        var content = $(data).find('#content');  // <--- So this turns out to be wrong. Right is only $(data);
        $("#result").empty().append(content);
    });
});
</script>

What is wrong in this? Please assist. Thank you.

If you require any additional information, please ask.