should-be-working jQuery .post() function to HTML via PHP?

I went through the code at the following two links: http://pastebin.com/iUd22CRY http://www.jensbits.com/2009/10/04/jquery-ajax-and-jquery-post-form-submit-examples-with-php

Everything seems pretty clear in the code itself, but I can't figure out the complete story of which codeblocks are associated with which filenames. Basically, I am trying to find an up-to-date guide to using jQuery's post function for interactions with a PDO object, and I have been very unsuccessful in doing so.

What I plan to do next is attempt to convert/update an example from w3schools, if I cannot figure out what the filenames should be. Basically, with the pastebin, I think I know where the first three paragraphs of code go, but I have no idea where to place the javascript near the end. Before I slum, though, I was hoping someone would look over my code. Can you see the problem?

-Edit- I have noticed an error via Chrome's console (ctrl+shift+j in-browser): Uncaught SyntaxError: Unexpected token ; encode.js:17 http://ajform.99k.org/issues/semicolon/ or Uncaught ReferenceError: $ is not defined encode.js:1 http://ajform.99k.org/issues/orderofappearance/

Filesystem structure:

webroot/sitename/index.php; webroot/sitename/process_form.php; webroot/sitename/js/jquery-1.8.2.js; webroot/sitename/js/encode.js

index.php:

<!DOCTYPE html>
<html>
<head>
  <title>Tmp homepage</title>
  <script type="text/javascript" src="js/encode.js"></script>
  <script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
</head>

<body>
<form id="ajform">
    <fieldset>
        <legend>jQuery.post Form Submit example</legend>
        <p>
            <label for="name">Name:</label></br />
            <input id="name" type="text" name="name" />
        </p>
        <p>
            <label for="email">email:</label></br />
            <input id="email" type="text" name="email" />
        </p>
        <p>
            <input type="submit" value="Submit" />
        </p>
    </fieldset>
</form>
<div id="post"></div>
</body>

</html>

encode.js:

$(document).ready(
  $(function(){
      $("#ajform").submit(function(e){    
         e.preventDefault();  

          $.post("../process_form.php", $("#ajform").serialize(),
          function(data){
              if(data.email_check == 'invalid'){

                      $("#post").html("<div class='errorMessage'>Sorry " + data.name + ", " + data.email + " is NOT a valid e-mail address. Try again.</div>");
              } else {
                  $("#post").html("<div class='successMessage'>" + data.email + " is a valid e-mail address. Thank you, " + data.name + ".</div>");
                  }
          }, "json");    
      });

  });
)

process_form.php:

<?php

$email_check = '';
$return_arr = array();

if(filter_var($_POST['email'], FILTER_VALIDATE_EMAIL) || filter_var($_POST['email'], FILTER_VALIDATE_EMAIL)) {
   $email_check = 'valid';
}
else {
    $email_check = 'invalid';
}


$return_arr["email_check"] = $email_check;

if (isset($_POST['email'])){
    $return_arr["name"] = $_POST['name'];
    $return_arr["email"] = $_POST['email'];
}

echo json_encode($return_arr);

-Edit- After working through the errors, thanks to answerers, the working version is at hhttp://www.jensbits.com/demos/jqsubmit/index.php.

Solution

Your <script type="text/javascript" src="encode.js"></script> isn't loading. It's returning a 404.

And, put encode.js AFTER the jquery js.

View the source on the demo from my post that you cited. It will help you out.

http://www.jensbits.com/demos/jqsubmit/index.php

Thanks, BTW...