title: Jquery submit() html form based on php script's return value
body: <p>Ok, if somebody could take a look at this, I'd really appreciate it.  I'm implementing a captcha in an html form.  The captcha is php based, so i need to use jquery to post the submitted form to the captcha check script.</p>
  
  <p>The php script returns 1 if the check was correct, or 0 if it was incorrect.</p>
  
  <p>This is all working great, the problems i am having are with actually submitting the form, or preventing it based on what the php script returns. My the code is as follows:</p>
  
  <pre><code>                &lt;form id="contactform" action="FormHandler.cgi" method="POST"&gt;
      &lt;input name="requiredContact" size="25" type="text" /&gt;
  
      &lt;input name="requiredEmailFrom" size="25" type="text" /&gt;
      &lt;input name="requiredTelephone" size="18" tabindex="3" /&gt;
      &lt;textarea cols="25" name="comments" rows="4"&gt;&lt;/textarea&gt;
      &lt;select length="2" name="requiredContactMethod" tabindex="5"&gt;
      &lt;option selected="" value="Email"&gt;Email&lt;/option&gt;
      &lt;option value="Telephone"&gt;Telephone&lt;/option&gt;
      &lt;/select&gt;
      &lt;img src="captcha/captcha.php" style="float:none; margin:0px 0px -8px 0px; height:26px;"&gt;&lt;/img&gt;
      &lt;input type="text" id="CAPTCHA" style="margin-left: -5px; height:26px;"&gt;
              &lt;p id="caperror"&gt;&lt;/p&gt;
      &lt;p&gt;&lt;input name="B1" type="submit" value="Submit" /&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;
      &lt;input name="B2" type="reset" value="Clear" /&gt;&lt;/p&gt;
  &lt;/form&gt; 
  
  &lt;script&gt;
  
  
  
  $('#contactform').submit(function(){
  var cap = $('#CAPTCHA').val();  
  cap = 'CAPTCHA=' + cap;
  
  $.ajax({
  type: 'POST',
  url: 'captcha/capcheck.php',
  data: cap,
  dataType: "text",
  error: postfail,
   success: success
  });
  
  return false;  //Temporary, to stop the form no matter what.
  });
  
  function success(result){
  
  if(result == 1){
  alert('was correct');
  return true;
  }
  else{
  alert("error" + result);
  return false;
  }
  
  
  }
  
  function postfail(){
  alert('post failed');
      return false;
  }
  
  
  &lt;/script&gt;
  </code></pre>
  
  <p>So what i would like to happen, is when my success function returns false, it stops the form from submitting.  If it returns true, go ahead and submit the form. This is what I would like</p>
  
  <pre><code>$('#contactform').submit(function(){
  
  
  //The ajax post here
  
  //check the value of the ajax success function here;
  
  if(success(result)) {
  return true;
  }
  else {
  return false;
  }
  });
  </code></pre>
  
  <p>I am not good with function scopes in javascript.  If I define a variable inside the success function, I can't check the value in the form submit function, because it only has a local scope.  I could just use a link to submit the form, and then call submit(); but I want the form to be accessible to those without java.</p>
  
  <p>Is there any way to get the ajax post success function's result back to the scope of the submit() handler?</p>