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

raj kanwar
raj kanwar
4,043 Points
Posted by raj kanwar
raj kanwar
4,043 Points

Not working in Visual Studio 2010

I am using Visual studio 2010 and have following code. The studio does not show any errors yet nothing happens when I click the submit button. 

<!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 href="css/main.css" rel="stylesheet" type="text/css" />
    <script src="jquery-1.11.2.js" type="text/javascript"></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> Form submitted</p>");

                    });//end post
                }); //end submit
            });// end ready function
        </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

Marcus Parsons
Marcus Parsons
15,719 Points
Marcus Parsons
Marcus Parsons
15,719 Points

Hey raj kanwar,

I'm not sure if you've gotten this fixed by now, but there is an error in the video itself that was addressed. The action of the form points to a page that doesn't exist called signup. So, the form on the page should be:

<!-- Changed action method to index.html (same page) instead of non-existing "signup" page -->
<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>

The action should be redirected right back to index.html so that it can handle the data. I also have no idea if Visual Studio 2010 will act as a web server or not, but you must have a web server active in order to test the code from this video.

wuworkshop
wuworkshop
3,429 Points
wuworkshop
wuworkshop
3,429 Points

Are you testing this in an actual browser or does Visual Studio have some sort of internal browser window?

I just created a JSBin of your code and it seems to be working just fine.

http://jsbin.com/tiviho/1/