Form doesn't submit on second submit call

Question

I've been strugling with the following issue for over a week now so please excuse the long description. I want it to be as accurate and clear as possible:

I'm using the "simplr registration form" plugin to register new users. I need to add to the form an "address" field for the users to fill, and when the submit button is clicked the address should be sent to google maps API and recieve back the latitude and longitude which should then be saved in wpdb together with the rest of the user's data. To achieve this I've added the following to the php function which builds the html form:
- address input field
- 2 hidden fields for the lat&long
- jquery function that responds to the submit button and is supposed to do its thing after the button's clicked but before the form is actually submitted and handled by the plugin's php function.

Since using Google Maps API is asynchronous to get the job done I need to do the following:

Write a function that responds to the submit click.
That function should prevent the form from being submitted and call another function which does the google maps stuff and after it's finished submits the form.
The problem lies with the second submit. It just doesn't happen.
I have tried different ways (with jquery):
- a submit function that calls itself with the use of a flag that tells the first iteration not to submit and the second one to submit. The code works fine until the second iteration submit which simply doesn't work.
- a submit function that calls "this.submit()". Again, "this.submit()" doesn't cause the form to submit.
- a click function that should respond to the submit being clicked, do the google stuff and then call the submit function. Here even the click function doesn't fire at all.

// This is the button's definition:
$form .=  apply_filters('simplr-reg-submit', '<input type="submit" name="submit-reg" id="submit-reg" value="Register" class="submit button">');

// This is the php code that starts handling the submitted form 
if(isset($_POST['submit-reg'])) {

Here's an example for one of my attempts:

function codeAddress(callback)
{
    // do the google stuff
    // when finished submit the form
    $('#simplr-reg').get(0).submit();

    // it's all being done except for the submit part
}

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

// Here's a simplified example:
$('#simplr-reg').submit(function(event)
{
    this.submit(); //doesn't cause the form to submit
    event.preventDefault();
});

If I don't use event.preventDefault() and submit in the first iteration it submits fine.

I've tried solving this with the help of the guys on stackoverflow but no one could find what's wrong so I'm guessing it's got something to do with WordPress or the plugin.

Answer 1

The php function which handles the submitted values in this plugin checks first if the button's value isset. When using the original submit it is. When using preventDefault() and then calling submit() it isn't and therefor the php doesn't handle the submitted form but rebuilds it. To fix this I just added to the isset() check a check if the lat/long values are true. That did the trick.

Answer 2

I feel this question doesn't belong here but never the less.

OK Ash try your logic like this:

<script>
var wasGoogleFetchSuccess = 0;

$('#simplr-reg').submit(function() {

    if(wasGoogleFetchSuccess == 1) {
        return true; // I can now submit form as normal
    } else {
        goDoGoogleMapAddressSearch();
        return false; // dont submit form this time round
    }

});

function goDoGoogleMapAddressSearch() {
    //Do google map search
    //On success or completion do the following:
    $("blah blah blah").success(function() { // Just an example
        wasGoogleFetchSuccess = 1;
        $('#simplr-reg').submit();
    });
}
</script>