title: Jquery .load and POST data
body: <p>This is really frustrating I would appreciate some help with this.  I have a div, called comments and a form inside of that div.  What I want to do is post a form to the current page and have it load inside of the div without reloading the entire thing.  Here is my current code:</p>
  
  <pre><code>&lt;div id="comments"&gt;
  &lt;form action="#" method="post" onsubmit="return false;" &gt;
  &lt;input type="hidden" name="txtname" value="test"&gt;
  &lt;textarea id="wysiwyg" name="wysiwyg" rows="5" cols="50"&gt;&lt;/textarea&gt;
  &lt;input type="submit" name="post" id="post" value="Submit"&gt;
  &lt;/form&gt;
  &lt;script type="text/javascript"&gt;
  EDIT: Read edit below for current code
  &lt;/script&gt;        
  &lt;/div&gt;
  </code></pre>
  
  <p>When I submit, the alert fires, but the page does not load. It works fine if I make the event as follows:</p>
  
  <pre><code>$("#comments").load("comments.asp");
  </code></pre>
  
  <p>It's not liking the posting of data.  I have used .load before but never to post data.  I got the above code from these very same forums. </p>
  
  <p>I'm honestly not sure of the purpose of 'name' and 'tel' - do I refer to those variables or the form variable names when processing the code?  This is in ASP classic. </p>
  
  <p>What's wrong with the above code, how can I get it to send data from the forum via POST?  Thanks!</p>
  
  <p>EDIT:
  I am now using the following code:</p>
  
  <pre><code>$("#post").submit(function(event){
      var $form = $(this),
          $inputs = $form.find("input, select, button, textarea"),
          serializedData = $form.serialize();
      $inputs.attr("disabled", "disabled");
  
      $.ajax({
          url: "/comments.asp",
          type: "post",
          data: serializedData,
          success: function(response, textStatus, jqXHR){
              console.log("comment posted");
          },
          error: function(jqXHR, textStatus, errorThrown){
              console.log(
  
                  textStatus, errorThrown
              );
          },
          complete: function(){
              // enable the inputs
              $inputs.removeAttr("disabled");
          }
      });
  
      event.preventDefault();
  });
  </code></pre>
  
  <p>And now it's using properly getting the form handled...however it goes to comments.asp.  How can I make all the action happen in a certain div (comments div?)</p>