0

2 種類の検索を実行できる小さな検索フォームがあります。

<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

#navbar-search-full別の問題があります。クリック ハンドラーがトリガーされる前に、href を変更しています。

フォームが送信される前にハンドラー.attr('href','#navbar-search-full')内に移動するか、完全に削除してください。click

于 2013-01-25T21:36:19.600 に答える
1 
return false;

これはあなたのために働くでしょう...

編集

アンカー href="#" を使用してから、"data-" 属性を使用して URL を保存できます。次に、アンカーにはアクションがなく、 .attr("data-").. を使用して同じ方法で属性を取得できます..

于 2013-01-25T21:24:01.987 に答える