Run javascript before submitting a rails form

Question

I want to run the following html5 geolocation javascript before submitting the form. Basically I'm after this process: the geolocation popup appears when submitting the form, the user clicks allow and then the form will be processed.

function getGeoLocation() {
    navigator.geolocation.getCurrentPosition(setGeoCookie);
}

function setGeoCookie(position) {
    var cookie_val = position.coords.latitude + "|" + position.coords.longitude;
    document.cookie = "lat_lng=" + escape(cookie_val);
}

And I'm trying to accomplish this via an onclick event from the form:

<%= form_tag search_path, :method => "get" do %>
    <%= text_field_tag :search, params[:search], autofocus: true,
                   placeholder: "Enter keyword to search" %>
    <%= submit_tag "Search", name: nil, onclick: "getGeoLocation();", :style => "display: none;" %>
<%end%>

But unfortunately nothing is happening, I'm receiving no errors under browser inspector as well! Any ideas on how to implement this?

Update 1

I'm also using autocomplete to submit the form:

$(document).ready(function() {
    $("#search").autocomplete({
        source: "/search_suggestions",
        autoFocus: true,
        select: function(event, ui) {
            $(event.target).val(ui.item.value);
            $('#search').closest("form").submit();
            return false;
        }
    });
});

If I use @Alex Kojin it redirects me to another form a have inside another tab.

Obaiid Farooq · Accepted Answer · 2018-01-24 09:49:10Z

1

You can easily solve this with

$('form').submit(function(e) { e.preventDefault(); });

answered Jan 24, 2018 at 9:49

Obaiid Farooq

212 bronze badges

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

1 Comment

Dev Over a year ago

Thanks for the reply @Obaiid Farooq!! Please check out update 1 for more info.

Alex Kojin · Accepted Answer · 2018-01-24 09:52:05Z

1

You need to bind to form's submit event, and there execute your code.

In case you use jquery:

$('form').submit(function(e) {
  e.preventDefault();
  getGeoLocation();
});

Manually submit the form in setGeoCookie method:

function setGeoCookie(position) {
    var cookie_val = position.coords.latitude + "|" + position.coords.longitude;
    document.cookie = "lat_lng=" + escape(cookie_val);

    $('form').submit();
}

edited Jan 24, 2018 at 9:52

answered Jan 24, 2018 at 9:45

Alex Kojin

5,2142 gold badges31 silver badges31 bronze badges

6 Comments

Dev Over a year ago

Thanks for the reply @Alex Kojin! Can you give me a few pointers on how to do this.

Rory McCrossan Over a year ago

Geolocation is async, though.

Dev Over a year ago

@Alex Kojin , The geolocation popup appears but when I hit allow, it doesn't process the form, thus it doesn't redirect to the results!

Alex Kojin Over a year ago

Is it call setGeoCookie method? Try to call in the end $('#search form').submit();

Dev Over a year ago

@Alex Kojin, if I put $('form').submit it processes another form and if I put $('#search form').submit(); it doesn't do anything! weird I know!

|

Collectives™ on Stack Overflow

Run javascript before submitting a rails form

2 Answers 2

1 Comment

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related