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

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,394 Points

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

3 Answers

Chyno Deluxe
Chyno Deluxe
16,874 Points

Do you have a page title signup.html?

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>

Chyno Deluxe
Chyno Deluxe
16,874 Points

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

Jeremy Castanza
Jeremy Castanza
12,075 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.