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

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

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/

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.