web-dev-qa-db-ja.com

「キーを入力」でページの再読み込みを停止します

ページの上部に、ユーザーが隣のボタンを押すとajax呼び出しを行う検索ボックスがあります。入力タグを更新して、ユーザーが'enter'キーを押すと、適切なJavaScriptが実行されるようにしますwithoutページをリロードします。問題は、ページがリロードし続けることです。これが私の最新の試みです。

$("searchText").bind('keyup', function(event){ 
  if(event.keyCode == 13){ 
    event.preventDefault();
    $("#buttonSrch").click(); 
    return false;
  }
});

<input type='search' id='searchText' />
<input type='button' id='buttonSrch' onclick="search(document.getElementById('searchText'))" value='Search' />
javascriptjqueryinput
38
John R

inputsにバインドしないでください。 formにバインドします。 formのIDがsearchFormであると仮定します。

$("#searchForm").submit(function() {
    search($("#searchText").get(0));
    return false;
});

試してみてください。

また、プレーンなJavaScriptでも実行できます。

document.getElementById('searchForm').addEventListener('submit', function(e) {
    search(document.getElementById('searchText'));
    e.preventDefault();
}, false);
30
icktoofay

セレクタに#がありません。これを試して

<input type='text' id='searchText' />

JS

$("#searchText").bind('keyup', function(event){ 
  if(event.keyCode == 13){ 
    event.preventDefault();
    //$("#buttonSrch").click(); 
    search(this.value);
  }
});
16
ShankarSangoli

私は少し遅れて知っていますが、あなたと同じ問題に遭遇しました。それはバインドの代わりに「キープレス」を使用して私のために働いた。

$('#searchText').keypress(function (e) {                                       
       if (e.which == 13) {
            e.preventDefault();
            //do something   
       }
});
13
opp

フォームタグにonSubmit="return false;"を追加します

<form onSubmit="return false;">
/* form elements here */
</form>`
10
vijayscode
 $('#seachForm').submit(function(e){
      e.preventDefault();
      //do something
 });
6
Fresheyeball

フォームアクション属性をjavascript：void（0）に設定できます。そうすれば、フォームは投稿/取得されないため、ページは更新されません。

$(document).ready(function () {
  $('#form1').attr('action', 'javascript:void(0);');
});
3
LeeF

<form>タグで「action」属性を使用するだけです。このような

<form action="#">   // your content     </form>
1
ViPuL5

JSはすぐに実行されますか、それともドキュメントで実行されますか？準備ができているドキュメントにない場合、bindを呼び出そうとしている時点でボタンは存在しません。

0
Davy8

これが私のために働いた結果です。フォームの送信をトリガーしたオブジェクトを見つけるのが私の苦労であったことに注意してください。

$('#missingStaff').submit(function (e) {
e.preventDefault();
var comment = $(document.activeElement)[0];
submitComments(comment);

}）;

0
Kremena Lalova