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

Question

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.

You script tag is wrong. The src attribute should be /js/encode.js instead of encode.js. — slashingweapon
– slashingweapon, Commented Nov 5, 2012 at 3:56
@slashingweapon Thank you. It has been fixed. This is a link: ajform.99k.org/js/encode.js — Wolfpack'08
– Wolfpack'08, Commented Nov 5, 2012 at 3:56
There is a syntax error in encode.js. Check your browser's console for details. — slashingweapon
– slashingweapon, Commented Nov 5, 2012 at 3:58
@slashingweapon I've caught those, also. Trying to find a similar issue on google. It seems I need to list the jQuery script before the encode script. — Wolfpack'08
– Wolfpack'08, Commented Nov 5, 2012 at 4:00

jk. · Accepted Answer · 2012-11-05 04:00:30Z

2

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...

edited Nov 5, 2012 at 4:00

answered Nov 5, 2012 at 3:54

jk.

14.4k4 gold badges45 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Wolfpack'08 Over a year ago

I just saved a bad draft, by mistake, due to a copy/paste error. The change has now been committed on the server. The new link is js/encode.js. Thank you.

jk. Over a year ago

@Wolfpack'08 answer updated. Put your scripts in the right order.

Wolfpack'08 Over a year ago

Yeah, that's the tutorial I went through. It's dope. I saw the demo, but it didn't work on my system due to the mistake I made, which you mention in your answer (order of appearance of .js scripts). If you go to the ajform site I posted, you can see I've repaired the error. I'll put an error-having form up in the question, shortly.

Wolfpack'08 · Accepted Answer · 2012-11-05 04:27:35Z

Working code with filenames:

index.php, located at sitename/index.php:

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

process_form.php, located at sitename/process_form.php (php 5.2 or later [may vary based on your config]):

<?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);

encode.js, located at sitename/js/encode.js (using jQuery 1.8.2.min.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");    
      });

  })
)

Collectives™ on Stack Overflow

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

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related