JavaScript AJAX Basics (retiring) jQuery and AJAX Posting Data with jQuery

Milagro Scardigno
Milagro Scardigno
4,494 Points

Running this in localhost, and keep getting a POST 404 (Not found)

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>AJAX with jQuery</title>
  <link href='http://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
  <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>

// var url  = "http://website.com/posts";
// var data = {
//   firstName : "Dave",
//   lastName  : "McFarland"
//   };

//   $.post(url,data,callback);
$(document).ready(function () {
  // body...
  //now we need to add an event handler that is when the visitor clicks the signup button will send out our AJAX request
  $('form').submit(function(event) {
    /* Act on the event */
    event.preventDefault();//prevents the code from submitting, when the submit button is clicked
    //HTML form have an action property, so we can set our url simply to the action property of the form
    var url = $(this).attr("action"); //here we are using jquery to select the form and pull out its action attribute $(this) the url to server side program .attr("action") that is gonna process this form
    //next
    //lets capture the form data
    //using plain Javascript you will have to generate a list of every form field, then go through that list, retrieve the name and the value for each form field and then encode all that
    //fortunately jquery provides a simpler form: just select the form and run its serialize() method on it
    var formData = $(this).serialize(); // now we have our url and data, now we need to run the post method
    $.post(url, formData, function (response) {
      // body...
      //let the user know the form was submitted
      //since we dont need the form or form fields on the page any longer, lets replace them
      //this code select a div on the page and replace it with a message
      $('#signup').html("<p>Thanks for signing up!</p>");



    });//end of post

  });

}); //end ready



/////OLD CODE//////
  // $(document).ready(function() {

  //   $('form').submit(function(evt) {
  //     evt.preventDefault();
  //     var url = $(this).attr("action");
  //     var formData = $(this).serialize();

  //     //supports the ability to send more data meant to be stored in a database
  //     $.post(url, formData, function(response) {
  //         $('#signup').html("<p>Thanks for signing up!</p>");
  //     }); // end post


  //   }); // end submit
  // }); // end ready

//////END OF OLD CODE///////

</script>
</head>
<body>
  <div class="grid-container centered">
    <div class="grid-100">
      <div class="contained">
        <div class="grid-100">
          <div class="heading">
            <h1>Sign Up for Our Newsletter</h1>
            <div id="signup">
              <form method="post" action="/signup">
                  <label for="userName">Please type your name</label>
                  <input type="text" name="userName" id="userName"><br>
                  <label for="email">Your email address</label>
                  <input type="email" name="email" id="email"><br>
                  <label for="submit"></label>
                <input type="submit" value="Signup!" id="submit">
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

Any suggestions on what I am doing wrong?

Richard Duncan
Richard Duncan
5,563 Points

Hi Milagro, I can't reproduce. Could you tell me when are you seeing the error? is all the code meant to be commented out in your example (posted) or is that as a result of your own debugging efforts?

Milagro Scardigno
Milagro Scardigno
4,494 Points

I see the error after clicking the submit button. I added alerts on each function block to see if the functions are firing. Please ignore my comments since they are notes to reference later.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>AJAX with jQuery</title>
  <link href='http://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
  <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>

// var url  = "http://website.com/posts";
// var data = {
//   firstName : "Dave",
//   lastName  : "McFarland"
//   };

//   $.post(url,data,callback);
$(document).ready(function() {
  // body...
  alert('I am ready');
  //now we need to add an event handler that is when the visitor clicks the signup button will send out our AJAX request
  $('form').submit(function(evt) {
    /* Act on the event */
    evt.preventDefault();//prevents the code from submitting, when the submit button is clicked
    alert('submit event happened');
    //HTML form have an action property, so we can set our url simply to the action property of the form
    var url = $(this).attr("action"); //here we are using jquery to select the form and pull out its action attribute $(this) the url to server side program .attr("action") that is gonna process this form
    //next
    //lets capture the form data
    //using plain Javascript you will have to generate a list of every form field, then go through that list, retrieve the name and the value for each form field and then encode all that
    //fortunately jquery provides a simpler form: just select the form and run its serialize() method on it
    var formData = $(this).serialize(); // now we have our url and data, now we need to run the post method
    $.post(url, formData, function (response) {
      // body...
      //let the user know the form was submitted
      //since we dont need the form or form fields on the page any longer, lets replace them
      //this code select a div on the page and replace it with a message
      alert("I am getting to the response text to thank for signing up");
      $('#signup').html("<p>Thanks for signing up!</p>");



    });//end of post

  });

}); //end ready



/////OLD CODE//////
  // $(document).ready(function() {

  //   $('form').submit(function(evt) {
  //     evt.preventDefault();
  //     var url = $(this).attr("action");
  //     var formData = $(this).serialize();

  //     //supports the ability to send more data meant to be stored in a database
  //     $.post(url, formData, function(response) {
  //         $('#signup').html("<p>Thanks for signing up!</p>");
  //     }); // end post


  //   }); // end submit
  // }); // end ready

//////END OF OLD CODE///////

</script>
</head>
<body>
  <div class="grid-container centered">
    <div class="grid-100">
      <div class="contained">
        <div class="grid-100">
          <div class="heading">
            <h1>Sign Up for Our Newsletter</h1>
            <div id="signup">
              <form method="post" action="/signup">
                  <label for="userName">Please type your name</label>
                  <input type="text" name="userName" id="userName"><br>
                  <label for="email">Your email address</label>
                  <input type="email" name="email" id="email"><br>
                  <label for="submit"></label>
                <input type="submit" value="Signup!" id="submit">
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

2 Answers

Shawn Flanigan
PRO
Shawn Flanigan
Pro Student 15,803 Points

Your JavaScript is pulling the action attribute from your form, with this bit of code:

var url = $(this).attr("action");

and trying to send data to that url with an AJAX request. In this instance, your form has an action of /signup, which means your JavaScript will try to submit this information to localhost/signup. In the project files, this page doesn't exist, so it's throwing a 404 error. In production, you'd probably have a directory called signup, with a php file that would process the data.

Here, if you want to get rid of the 404 error, you could change the action to /index.html. It still won't process your form, but you should no longer see this error.

Hope this makes sense!

Milagro Scardigno
Milagro Scardigno
4,494 Points

Now that works!

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>AJAX with jQuery</title>
  <link href='http://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
  <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>

// // var url  = "http://website.com/posts";
// // var data = {
// //   firstName : "Dave",
// //   lastName  : "McFarland"
// //   };

// //   $.post(url,data,callback);
// $(document).ready(function() {
//   // body...
//   alert('I am ready');
//   //now we need to add an event handler that is when the visitor clicks the signup button will send out our AJAX request
//   $('form').submit(function(evt) {
//     /* Act on the event */
//     evt.preventDefault();//prevents the code from submitting, when the submit button is clicked
//     alert('submit event happened');
//     //HTML form have an action property, so we can set our url simply to the action property of the form
//     var url = $(this).attr("action"); //here we are using jquery to select the form and pull out its action attribute $(this) the url to server side program .attr("action") that is gonna process this form
//     //next
//     //lets capture the form data
//     //using plain Javascript you will have to generate a list of every form field, then go through that list, retrieve the name and the value for each form field and then encode all that
//     //fortunately jquery provides a simpler form: just select the form and run its serialize() method on it
//     var formData = $(this).serialize(); // now we have our url and data, now we need to run the post method
//     $.post(url, formData, function(response) {
//       // body...
//       //let the user know the form was submitted
//       //since we dont need the form or form fields on the page any longer, lets replace them
//       //this code select a div on the page and replace it with a message
//       alert("I am getting to the response text to thank for signing up");
//       $('#signup').html("<p>Thanks for signing up!</p>");



//     });//end of post

//   });

// }); //end ready



/////OLD CODE//////
  $(document).ready(function() {

    $('form').submit(function(evt) {
      evt.preventDefault();
      var url = $(this).attr("action");
      var formData = $(this).serialize();

      //supports the ability to send more data meant to be stored in a database
      $.post(url, formData, function(response) {
          $('#signup').html("<p>Thanks for signing up!</p>");
      }); // end post


    }); // end submit
  }); // end ready

//////END OF OLD CODE///////

</script>
</head>
<body>
  <div class="grid-container centered">
    <div class="grid-100">
      <div class="contained">
        <div class="grid-100">
          <div class="heading">
            <h1>Sign Up for Our Newsletter</h1>
            <div id="signup">
              <form method="post" action="index.html">
                  <label for="userName">Please type your name</label>
                  <input type="text" name="userName" id="userName"><br>
                  <label for="email">Your email address</label>
                  <input type="email" name="email" id="email"><br>
                  <label for="submit"></label>
                <input type="submit" value="Signup!" id="submit">
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

T H A N K Y O U !!!!!!

Milagro Scardigno
Milagro Scardigno
4,494 Points

At the end the form in this case is being posted back to the index.html file!

<form method="post" action="index.html">
                  <label for="userName">Please type your name</label>
                  <input type="text" name="userName" id="userName"><br>
                  <label for="email">Your email address</label>
                  <input type="email" name="email" id="email"><br>
                  <label for="submit"></label>
                <input type="submit" value="Signup!" id="submit">
              </form>