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 Md Umar
Md Umar
376 Points

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>
Md Umar
Md Umar
376 Points

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.

Md Umar
Md Umar
376 Points

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

Iain Simmons
MOD
Iain Simmons
Treehouse Moderator 32,305 Points
Iain Simmons
Iain Simmons
Treehouse Moderator 32,305 Points

$('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.