title: Replace HTML form on submit with jQuery
body: <p>So here's what I'm trying to do: in my webpage, I have a lot of HTML forms. If any individual form is submitted, I want the entire form to be replaced with something. However, I haven't been able to do this.</p>
  <p>Below is my JavaScript code:</p>
  <pre><code>$(&quot;#commentreply&quot;).each(function() {
      var replace = false;
      $(this).submit(function() {
          // http://stackoverflow.com/q/16323360/1222411
          event.preventDefault();
  
          var url = $(this).attr('action');
          var nameValue = $(this).find('input[name=&quot;name&quot;]').val();
          var commentValue = $('#commentEntry').val();
          var projectValue = $(this).find('input[name=&quot;project&quot;]').val();
          var idValue = $(this).find('input[name=&quot;id&quot;]').val();
          var posting = $.post(url, {
              project : projectValue,
              id : idValue,
              name : nameValue,
              comment : commentValue
          });
  
          posting.done(function(data) {
              $(this).replaceWith(&quot;(HTML content to replace form)&quot;);
          }).error(function(){
              alert(&quot;An error occurred. Be sure you entered a name and comment and try again&quot;);
          });
      });
  });
  </code></pre>
  <p>The idea is that the following HTML code:</p>
  <pre><code>&lt;form id=&quot;commentreply&quot; name=&quot;reply&quot; action=&quot;/lib/comments/addComment.php&quot; method=&quot;post&quot;&gt;
      &lt;input type=&quot;hidden&quot; name=&quot;project&quot; value=&quot;project&quot;&gt;
      &lt;input type=&quot;hidden&quot; name=&quot;id&quot; value=&quot;-1&quot;&gt;
      Name:&lt;input type=&quot;text&quot; id=&quot;nameEntry&quot; name=&quot;name&quot; size=&quot;100&quot;&gt;&lt;br&gt;
      Comment:&lt;br&gt;&lt;textarea id=&quot;commentEntry&quot; name=&quot;comment&quot; size=&quot;255&quot;&gt;
          Enter comment here&lt;/textarea&gt;&lt;br&gt;
      &lt;input type=&quot;submit&quot; value=&quot;Submit&quot;&gt;
  &lt;/form&gt;
  </code></pre>
  <p>Will become this when the submit button is hit:</p>
  <pre><code>(HTML content to replace form)
  </code></pre>
  <p>Any advice? Would it be better to attach JavaScript to each form rather than use .each() to deal with addressing each form?</p>