PHP 'beating' javascript function call?

Question

I've got a bit of a weird problem.

I'm creating a location based web app that is using a javascript function to get a user's GPS coordinates. I have a form with a submit button, and when that submit button is clicked, the function is called (onclick='getCoords()"). The javascript then sets that values of two hidden fields (latitude and longitude) to the GPS coords.

My issue is this: PHP is 'beating' the javascript in the sense that the field values aren't being set in time, so that each value becomes a 0. I've done a bunch of testing, and this is definitely the issue. If I do something like set a seperate button to run the javascript function, the run the form everything works fine.

Any ideas on how to solve this problem?

Gists:

https://gist.github.com/2425419

https://gist.github.com/2425394

https://gist.github.com/2425391

I don't see how this is possible if the javascript triggers the form submit. Can you post some code? — F21
– F21, Commented Apr 20, 2012 at 2:22
Let us see the code. My guess would be that something in getCoords is asynchronous. — ceejayoz
– ceejayoz, Commented Apr 20, 2012 at 2:24
I'm with ceejayoz. getCoords isn't guaranteed to have executed before the page unloads, so you'll need to make it synchronous, or have javascript cancel the submission, and then submit it on the callback for the AJAX call. — CWSpear
– CWSpear, Commented Apr 20, 2012 at 2:26

Matthew Flaschen · Accepted Answer · 2012-04-20 02:49:58Z

2

Along the lines of what Volkner said, block submit using a submit handler (call preventDefault), then submit at the end of itsWorking. You can either call .submit() to do the submission, or use AJAX.

edited Apr 20, 2012 at 2:49

answered Apr 20, 2012 at 2:43

Matthew Flaschen

286k53 gold badges523 silver badges554 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

CWSpear · Accepted Answer · 2012-04-20 03:08:56Z

I think the crux of your problem is that an <input type="image"> will submit a form just as sure as <input type="submit"> will.

However, to fix this as is, add event as a parameter to both the call and declaration of getUserLocation(event).

Then edit your JavaScript as follows:

function getUserLocation(event) {
    event.preventDefault(); // prevents form from submitting
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(itsWorking, notWorking);
    } 
    else {
        alert("Dang! Your browser doesn't support finding your location, use the zipcode method below.");
    }
};

function itsWorking(position) {
    var lat = position.coords.latitude;
    var longi = position.coords.longitude;
    var finalLat = Math.round(lat*1000000)/1000000
    var finalLong = Math.round(longi*1000000)/1000000
    $("#longi").val(finalLong);
    $("#lati").val(finalLat);

    document.getElementById('findoneform').submit(); // submits form since we were successful
};

But like I originally stated, it seems if you used an img tag instead of <input type="image">, that would prevent the form from sending in the first place (and maybe you did this on purpose, because you wanted to have two ways to submit the form?).

This issue happens because the page unloads (submits the form) before the geolocator's done doing its thing, but this way, we stop the form from submitting, and itsWorking() only gets called AFTER the geolocator has done its thing, so we don't submit the form until the end of itsWorking() when we've done everything we wanted to do.

Collectives™ on Stack Overflow

PHP 'beating' javascript function call?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related