Submitting form with jQuery
<p>Apologies if this has been answered before (I couldn't find the answer when I searched the archives)</p>

<p>I've got a page protected by a password:</p>

<pre><code>&lt;?php

if($_POST['pw'] == 'pw')
{
    //Page content
} else
{
    //Display password form
}
?&gt;
</code></pre>

<p>Within the page content, I've got another form, which I want to submit using jQuery, and have the following code:</p>

<pre><code>&lt;script type='text/javascript'&gt;

  var dataString = $('input#input1').val();  

  $(function() {  

  $('#submit').click(function()
  {  
    $.ajax({  
      type: 'POST',  
      url: 'p2.php',  
      data: dataString, 
      dataType: html,
      success: function(data2) {
        $('#testResult').html(data2);
      }  
    });  
    return false; 
  });
});

&lt;/script&gt;

&lt;form name='form1' id='form1' action=''&gt;  
  &lt;fieldset&gt;  
    &lt;label for='input1' id='input1_label'&gt;Input 1&lt;/label&gt;  
    &lt;input type='text' name='input1' id='input1' size='30' /&gt;  

    &lt;input type='submit' value='Update / reset' id='submit' class='buttons' /&gt;
   &lt;/fieldset&gt;  
&lt;/form&gt; 

&lt;div id='#testResult'&gt;&lt;/div&gt;;
</code></pre>

<p>However, clicking submit then sends the form to p1.php?input1=test (i.e., the data string is being sent to p1.php, not p2.php).  If I edit the code and remove <code>dataType:html</code> and the 2 references of <code>data2</code>, then this doesn't happen (infact, nothing happens, so I assume that jQuery is submitting the data to the form).  I've also changed the <code>type</code> to 'GET', incase the 2 POST requests on the same page were causing problems, but this didn't change the result.</p>

<p>What am I missing to get the information from p2.php (i.e. <code>data2</code>) and displaying it?!</p>

<p><strong>EDIT</strong></p>

<p>Thanks to a comment pointing out a typo, I've changed <code>dataType: html</code> to <code>dataType: 'html'</code> - this now doesn't cause the page to redirect to p1.php?input1=test, but once again, it doesn't do anything (when it should still be returning the value of <code>data2</code>)</p>

<p><strong>EDIT 2</strong></p>

<p>I've updated the code so <code>dataString</code> is now:</p>

<pre><code>var dataString = $('input#input1').val();   
dataString = 'var1='+dataString;
</code></pre>

<p>but this hasn't made any difference</p>

<p>For clarification, my p2.php just contains the following:</p>

<pre><code>&lt;?php

  echo "&lt;p&gt;HELLO!&lt;/p&gt;";

?&gt;
</code></pre>

<p><strong>EDIT 3</strong></p>

<p>I made the changes to my code has suggested by Damien below; I get the alert of "works!" but still nothing seems to be returned from p2.php, and nothing is inserted into the <code>#testResult</code> div.</p>
