0

我有一个小型搜索表单，可以执行两种类型的搜索：

<form id="form-navbar-search" class="navbar-search pull-left" action="index.cfm?fuseaction=Search.output" method="post">
   <div class="input-append">
      <input type="text" name="header_search_criteria" title="Criteria to search" placeholder="search" class="search-query span9" />
      <input type="submit" name="quick" value="Quick" title="Search on task ID or task name" class="btn btn-inverse" />
      <a href="index.cfm?fuseaction=Search.home" id="navbar-search-full" title="Start a full search" class="btn btn-inverse" />Full</a>
   </div>
</form>
  1. 如果按下“快速”提交按钮，表单将提交到默认操作属性 ( index.cfm?fuseaction=Search.output)。这行得通。
  2. 如果按下“完整”按钮（实际上是a我使用 Bootstrap 将其设置为按钮的样式），我想阻止链接打开新页面，将表单的操作更改为index.cfm?fuseaction=Search.home，然后提交表单。我为此编写了这个 jQuery：

 

$('#navbar-search-full').click( function(event) {
   event.preventDefault(); //don't let the link open a new page
   $('#form-navbar-search').attr('action',  $(this).attr('href')).submit(); //instead, change the search form action, then submit it
})
.attr('href','#navbar-search-full');

正如您在此 JSFiddle 中看到的， preventDefault() 似乎没有拦截链接操作。我需要做哪些调整才能做到这一点？

4

2 回答 2

1 
return false;

这将为您工作...

编辑

您可以拥有锚点 href="#"，然后使用“data-”属性来存储您的 URL。然后锚不会有任何动作，您可以使用 .attr("data-").. 以相同的方式检索属性，无论您决定调用它..

于 2013-01-25T21:24:01.987 回答
1

我看到了一个不同的问题：您在#navbar-search-full触发点击处理程序之前更改了 href 。

在提交表单之前尝试在处理程序.attr('href','#navbar-search-full')内部移动，或者完全删除它。click

于 2013-01-25T21:36:19.600 回答