使用 GET 请求提交表单到页面本身答案

【问题标题】：Using GET Request submit form to the Page Itself使用 GET 请求提交表单到页面本身
【发布时间】：2012-04-15 09:08:04
【问题描述】：

我需要的是当用户在搜索框中键入他的查询时。

    <form class="navbar-search pull-left">
       <input type="text" autocomplete="off" autofocus id="query" class="search-query search_input" placeholder="Type your query...">
    </form>

我没有提交表单的按钮。我希望在用户按下 Enter 键时提交表单。当用户按下 Enter 键时，我希望 Query 显示在 URL 中。喜欢提交前的网址

http://example.come/

当用户输入他的文本并按下回车键时。我希望查询显示在这样的 URL 中

http://example.come/#query

无需重新加载整个。是否可以使用 Javascript 或 Jquery 或其他更简单的方法。

编辑：这是我尝试过的 window.location.hash = get_query ;

 if (get_query.length != 0) {
      $("#query").val(get_query);
  $('.search_input').trigger('keyup'); // This is the Event which triggers 
  }

【问题讨论】：

是的，有可能。阅读文档并尝试一下。
伙计，我尝试了一些技巧！但我真的很烂！！
如果没有提交按钮，一些浏览器不会提交表单。但是，请查看另一个 Stackoverflow 线程：stackoverflow.com/questions/699065/…
是否可以使用隐藏按钮？

标签： javascript jquery forms url

【解决方案1】：

添加一个类型为提交元素的输入，该元素被隐藏以支持通过回车键提交：

<form id="form1" class="navbar-search pull-left" action="">
    <input type="text" autocomplete="off" autofocus id="query" class="search-query search_input" placeholder="Type your query...">
    <input type="submit" style="display: none;">
</form>

在表单提交时使用输入值更改哈希：

$('#form1').submit(function() {
    window.location.hash = '#' + $("#query").val();
    return false;
});

另请参阅 my example 和 associated jsfiddle。

【讨论】：

如果我删除“return false”语句会怎样，因为我有一个很长的语句，它跟在 .submit(function() 之后？
如果你没有在提交处理程序结束时返回false，表单动作将被执行（因为它是空的，浏览器会重新加载页面）。返回false 的替代方法是设置action 属性：action="javascript:void(0);"；那么你可以删除return false;。
另见updated example 和associated jsfiddle。