Question

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

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

如果按下“快速”提交按钮，表单将提交给默认操作属性（index.cfm?fuseaction=Search.output）。这很有效。
如果 “完整”按钮（它实际上是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');

作为you can see in this JSFiddle，preventDefault（）似乎不会拦截链接操作。 我需要做出哪些调整才能做到这一点？

Answer 1

return false;

这对你有用......

修改

你可以拥有锚点href =“＃”，然后使用“data-”属性来存储你的URL。然后锚不会有任何动作，你可以使用.attr（“data-”）...以你决定调用它的方式以相同的方式检索属性..

Answer 2

我发现了另一个问题：在触发点击处理程序之前，您正在更改#navbar-search-full的href。

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

使用jQuery提交带有链接的表单

2 个答案: