1

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.

4
  • What browser are you using to test this? I remember a previous fault with google maps javascript API where the first request would be fine but when you hit for the second time it would JS error in IE. I cannot find where the bug report is on google.
    – Scott
    May 17, 2011 at 9:49
  • @Brady, the problem isn't with google maps. Take a look at my last piece of code (starts with // Here's a simplified example:). There's no google code there but the problem remains.
    – Ash
    May 17, 2011 at 10:25
  • have you tried replacing event.preventDefault(); with return false; ?
    – Bainternet
    May 17, 2011 at 11:00
  • @Bainternet, yes.
    – Ash
    May 17, 2011 at 11:13

2 Answers 2

2

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.

0

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>
4
  • thanks. About the question's location - I've asked a few questions on stackoverflow but no one found a solution there. So I figured the problem might be with the plugin or WP files. About your code - you can see it's pretty similar to the code I've posted, but I also tried code that looks almost exactly as yours and the problem is always with the inner call to submit (inside your goDoGoogle function). It doesn't cause the form to submit. I'll try your exact code anyway.
    – Ash
    May 17, 2011 at 11:22
  • By anychance your google function is never getting to the submit() ?? have you tried putting an alert() in the above sumbit to see it is being triggered?
    – Scott
    May 17, 2011 at 11:25
  • I've tried your code but I get the same results. The google function does its stuff fully and an alert before the submit fires but then the form doesn't submit. Instead of getting to the "you were registered successfully" screen the registration form simply reloads.
    – Ash
    May 17, 2011 at 20:06
  • code code test
    – Ash
    May 18, 2011 at 6:30

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.