Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

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

Posted by Polo Moreno
Polo Moreno
11,782 Points

I have doubt.

I have doubt. I try make my form Ajax using the example of the course. but, in the moment i look the console mark error 404. what is the problem in the code? this is my code.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>AJAX with jQuery</title>
    <link rel="stylesheet" href="css/main.css" type="text/css">
  <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
  $(document).ready(function() {

    $('form').submit(function(evt) {
      evt.preventDefault();
      var url = $(this).attr("action");
      var formData = $(this).serialize();
      $.post(url, formData, function(response) {
          $('#signup').html("<p>Thanks for signing up!</p>");
      }); // end post


    }); // end submit
  }); // end ready
  </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>
LaVaughn Haynes
LaVaughn Haynes
12,397 Points
LaVaughn Haynes
LaVaughn Haynes
12,397 Points

I edited your question so that your code would display correctly.

3 Answers

Chyno Deluxe
Chyno Deluxe
16,936 Points
Chyno Deluxe
Chyno Deluxe
16,936 Points

That is why you have a 404 error. The forms action is linking to a file you do not have. "/signup"

Chyno Deluxe
Chyno Deluxe
16,936 Points
Chyno Deluxe
Chyno Deluxe
16,936 Points

Do you have a page title signup.html?

Polo Moreno
Polo Moreno
11,782 Points

no, the signup is within same html code, is this.

$('#signup').html("<p>Thanks for signing up!</p>");

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

Jeremy Castanza
Jeremy Castanza
12,081 Points
Jeremy Castanza
Jeremy Castanza
12,081 Points

Change the action attribute to a file like "form_processor.php." Then create a file called form_processor.php in the same directory that your html file is located in.

Try it again and see if that makes a difference.

As an FYI - 404 error basically means that your program is looking for a file and cannot find it. Usually, this is caused because the path to the file in your code is incorrect or because the file hasn't been created it.