Question

我想在提交表单之前运行以下html5 geolocation javascript。基本上我是在这个过程之后：提交表单时会出现地理位置弹出窗口，用户单击“允许”，然后表单将被处理。

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);
}

我正在尝试通过表单中的onclick事件来完成此操作：

<%= 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%>

但遗憾的是没有发生任何事情，我在浏览器检查员下也没有收到任何错误！关于如何实现这个的任何想法？

更新1

我也使用自动填充功能提交表单：

$(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;
        }
    });
});

如果我使用@Alex Kojin，它会将我重定向到另一个标签内的另一种形式。

Answer 1

您需要绑定到表单的submit事件，然后执行您的代码。

如果你使用jquery：

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

以setGeoCookie方法手动提交表单：

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

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

Answer 2

您可以使用

轻松解决此问题

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

在提交rails表单之前运行javascript

2 个答案: