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

I am unable to follow along the topic titled "Posting data with jQuery".

I am using XAMPP for the server. I have downloaded the project and tried to access it but it does not get submitted. So please guide me what else I need to add in the script to submit form and get the message. Also I am little confused with "form" as a selector. There is no such elements or Tag Names. I am pasting the script below:

<!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'>
  <link rel="stylesheet" type="text/css" href="css/main.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>

I got one of point I raised, the action has to be assigned a url address. But how 'form' is used as selecor to choose an event to submit. Please do clear it.

Suppose , I want to submit my form details to databases using local server like XAMPP. Then what should I specify in place of action or how todo it?

1 Answer

$('form') is a jQuery selector looking for elements of type form, which you have (it has the action attribute you've mentioned).

As for submitting to a database with XAMPP, you'd need a PHP script to process the POST data that you're sending (the values of the form fields), and add to a MySQL database.

Have a look at the PHP & Databases with PDO course here on Treehouse for information on how to do that.