title: jQuery - How can I have the action of a form be to display in same div in which the form is?
body: <p>I have three pages <code>new.html</code>, <code>somepage.html</code>, and <code>someotherpage.html</code></p>
  
  <p><strong>new.html</strong></p>
  
  <pre><code>&lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script&gt;
   $(document).ready(function() {
    $('#nav a').click(function(e) {
     e.preventDefault();
     $('#content').load($(this).attr('href'));
    });
   });
  &lt;/script&gt;
  
  &lt;div id="nav"&gt;&lt;a href="somepage.html"&gt;Some page&lt;/a&gt;&lt;/div&gt;
  
  &lt;div id="content"&gt;show the stuff&lt;/div&gt;
  </code></pre>
  
  <p>When clicking on the <code>somepage.html</code> link, it is displayed in <code>div</code> having id <code>content</code>.</p>
  
  <p><strong>somepage.html</strong></p>
  
  <pre><code>&lt;form id="form" action="someotherpage.html" method="post"&gt;
  &lt;input type="submit" value="test"/&gt;
  &lt;/form&gt;
  </code></pre>
  
  <hr>
  
  <p>The action of the form goes to a new page, whereas I want it to be in the same <code>div</code> only where the actual form was.</p>