Domanda

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
È stato utile?

Soluzione

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.

Altri suggerimenti

If PHP's behaving differently, then its inputs are different. do print_r($_POST) in both situations and see what's different. PHP couldn't care less that you ran some Javascript on the page. All it'll see are some form values coming in.

If different values come in, then it'll behave differently. So check those inputs and figure out why your Javascript is changing the form data.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top