CODEWITHSUNDEEP
jquery
WpDoe
WpDoe

Reputation: 474

jQuery does not submit the form after modification

I have the following HTML form:

<form action="../start_timer" class="start_timer" id="447" method="post" accept-charset="utf-8">
<input type="hidden" name="shift_id" value="447">
<input type="hidden" name="latitude" class="latitude">
<input type="hidden" name="longitude" class="longitude">
<input type="submit" value="Start">
</form>

and the following jQuery to handle the form submition:

$(document).ready(function() {
        $( "form.start_timer, .form.end_timer" ).submit(function(e) {   
            if( $(this).children( ".latitude" ).val().length === 0 || $(this).children( ".longitude" ).val().length === 0 ){
                e.preventDefault();
                navigator.geolocation.getCurrentPosition(foundLocation, noLocation,{timeout:10000});
                submits=0;
                $( ".longitude" ).change(function(e) {
                    if (submits==0) {
                    $(this).submit();
                    }
                    submits++;
                });
            }else if( $(this).children( ".latitude" ).val().length !== 0 && $(this).children( ".longitude" ).val().length !== 0 ){

                return true;

            }
        });
    });

Here is foundLocation fuction which fills in the hidden fields:

function foundLocation( position ){ 

        var lat = position.coords.latitude;
        var long = position.coords.longitude;

        if ($( ".latitude" ).val( lat )!="lat") {
        $( ".latitude" ).val( lat ).trigger('change');
        }

        if ($( ".longitude" ).val( long )!="long") {
        $( ".longitude" ).val( long ).trigger('change');        
        }
}

What happens is that it stops in the else if case and does not really submit the form.

How can I actually submit it after the modification?

Any help or guidance is much appreciated.

Upvotes: 0

Views: 34

Answers (2)

Charleshaa
Charleshaa

Reputation: 2238

Your foundLocation function is wrong, so is your event attachment.

your foundLocation should be :

function foundLocation( position ){ 

    var lat = position.coords.latitude;
    var long = position.coords.longitude;

    $( ".latitude" ).val( lat );
    $( ".longitude" ).val( long ).trigger('change');        

}

And try attaching the submit event like this :

$(document).ready(function() {
    $( "form.start_timer, .form.end_timer" ).submit(function(e) {   
        var dat = $(this);
        if( $(this).children( ".latitude" ).val().length === 0 || $(this).children( ".longitude" ).val().length === 0 ){
            e.preventDefault();
            dat.on('change', '.longitude, .latitude', function(e) {
                if(dat.find('.latitude').val() != "" && dat.find('.longitude').val() != "") dat.submit();
            });
            navigator.geolocation.getCurrentPosition(foundLocation, noLocation,{timeout:10000});

        }
    });
});

Upvotes: 0

daniel.brubeck
daniel.brubeck

Reputation: 654

The problem is that the getCurrentPosition function is async, so you are triggering the form submit before the function has returned the values, the form submission should be something like this:

$( "form.start_timer, .form.end_timer" ).submit(function(e) {   
    var form = $(this);

    if( $(this).children( ".latitude" ).val().length === 0 || $(this).children( ".longitude" ).val().length === 0 ) {
         e.preventDefault();
         var geolocated = function(position) {
             foundLocation(position);
             form.submit();
         };
         navigator.geolocation.getCurrentPosition(geolocated, noLocation,{timeout:10000});
    } else {
            return true;
    }
});

Upvotes: 1

Related Questions