Question

I’m using a PHP file (as part of a wordpress plugin), which contains several functions.
One of them builds an html form and another one deals with the submitted form.
I’ve added to the function that builds the form a submit() function in which I call an asynchronous function.
In order for it to finish before the form is submitted I’m using preventDefault() and a call to submit() when the async function finishes.
The problem is that my call to submit() after preventDefault() causes different results in the PHP function that handles the submitted form than the original submit.

Here’s the PHP code:

if(isset($_POST['submit-reg']))
{
    $output = sreg_process_form($atts); 
    return $output;
}
else
{
    $data = array();
    $form = simplr_build_form($data, $atts);        
    return $form;               
}

When I don’t use preventDefault() and submit() the condition is positive and the form is submitted normally.
When I do use them the second part is executed and the form is being rebuilt instead of submitted.
So the question is: what in preventDefault() and then submit() causes isset($_POST['submit-reg'])) to be false and how can I fix it?
edit: Here’s the JS:

$('#simplr-reg').submit(function(event)
{           
    event.preventDefault();
    codeAddress(function(success){}); //callback from googlemaps
});

function codeAddress(callback)
{               
    var geocoder = new google.maps.Geocoder();

    geoCodingStarted = true;

    geocoder.geocode( { 'address': address}, function(results, status)
    {
        if (status == google.maps.GeocoderStatus.OK) 
        {   
            var latitude = results[0].geometry.location.lat();
            var longitude = results[0].geometry.location.lng();
            $("input[name=latitude]").val(latitude); 
            $("input[name=longitude]").val(longitude);      

            $('#simplr-reg').submit();          
        }                   
    });         
}  // end of code address

Answer 1

When you submit the form via normal methods then submit-reg is set. When you use preventDefaul() and send the form asynchronously then the value is never set, because the form is never submited, altough it’s processed asynchronously. You should use another method to check is the form is being processed or built. Perhaps a hidden field. or another flag set dinamicaly on the page.

From the W3C

17.13.3 Processing form data

When the user submits a form (e.g., by
activating a submit button), the user
agent processes it as follows.

Step one: Identify the successful controls

Step two: Build a form data set

A form data set is a sequence of
control-name/current-value pairs
constructed from successful controls

Step three: Encode the form data set

The form data set is then encoded
according to the content type
specified by the enctype attribute of
the FORM element.

Step four: Submit the encoded form
*data set*

Finally, the encoded data is sent to
the processing agent designated by the
action attribute using the protocol
specified by the method attribute.

This specification does not specify
all valid submission methods or
content types that may be used with
forms. However, HTML 4 user agents
must support the established
conventions in the following cases:

• If the method is "get" and the action
  is an HTTP URI, the user agent takes
  the value of action, appends a `?’ to
  it, then appends the form data set,
  encoded using the
  “application/x-www-form-urlencoded”
  content type. The user agent then
  traverses the link to this URI. In
  this scenario, form data are
  restricted to ASCII codes.
• If the method is "post" and the action is an
  HTTP URI, the user agent conducts an
  HTTP “post” transaction using the
  value of the action attribute and a
  message created according to the
  content type specified by the enctype
  attribute. For any other value of
  action or method, behavior is
  unspecified.

User agents should render the response
from the HTTP “get” and “post”
transactions.

When you use preventDefault() you prevent this from happening making the variable ´submit-reg` unexistant because it is never set.

More info from jQuery site

Now when the form is submitted, the
message is alerted. This happens prior
to the actual submission, so we can
cancel the submit action by calling
.preventDefault() on the event object
or by returning false from our
handler.