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

时间:2013-01-25 21:21:27

标签: jquery

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

<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:
  3. $('#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()似乎不会拦截链接操作。 我需要做出哪些调整才能做到这一点?

2 个答案:

答案 0 :(得分:1)

return false;

这对你有用......

修改

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

答案 1 :(得分:1)

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

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