title: Simple AJax call is not working - Other page get loaded
body: <p>I have started learning AJAX today. I wrote a simple ajax call, but instead of getting response asynchronously, it just load the PHP script page. Just like normal form submission.</p>
  
  <p><strong>html</strong></p>
  
  <pre><code>&lt;form id="form" method="POST" action="name.php"&gt;
     &lt;input type="text" name="Name"&gt;
     &lt;input type="submit" value="Submit" /&gt; 
  </code></pre>
  
  <p></p>
  
  <p><strong>JS</strong></p>
  
  <pre><code>$("#form").submit(function(e) {
      e.preventDefault();
      var url = "name.php";
      $.ajax({
             type: "POST",
             url: url,
             data: $("#form").serialize(),
             success: function(data)
             {
                 alert(data);
             }
           });
  });
  </code></pre>
  
  <p><strong>PHP</strong></p>
  
  <pre><code>&lt;?php
       $data=  $_POST['Name'];
       echo $data;
   ?&gt;
  </code></pre>
  
  <p>Instead of getting Alert on the same page, I am being redirected to <code>name.php</code> with the value I have submited.</p>