関数をonClickおよびonKeypress JQuery/Javascriptで使用できるようにしますか？

Question

ボタンをクリックしてもEnterキーを押した場合に、自分の機能を利用できるようにしたいと考えています。私はボタンをクリックした場合

$('#searchBtn').on('click', function searchUser(){ 
 
    $.ajax({ 
 
     type: 'POST', 
 
     url: 'Components/Application.cfc?method=findUser', 
 
     data: {'searchFldVal':searchFldVal}, 
 
     dataType: 'json' 
 
    }).done(function(obj){ 
 
     return true; 
 
     }else{ 
 
     return false; 
 
     } 
 
     }); 
 

 
     return false; 
 
     } 
 
    }).fail(function(jqXHR, textStatus, errorThrown){ 
 
     alert(errorThrown); 
 
    }); 
 
    } 
 
});

<form name="searchForm" id="searchForm" action="#" method="POST" onsubmit="searchUser()"> 
 
\t <div> 
 
\t \t <input type="text" name="searchFld" id="searchFld" size="24" maxlength="24" value="" title="Maximum size of the field is 24 characters." placeholder="Example: John, Miller" /> 
 
\t </div> 
 
\t <div> 
 
\t \t <input type="button" name="searchBtn" id="searchBtn" value="Search"/> 
 
\t </div> 
 
</form>

上記のコードは正常に動作しますが、私はいくつかの文字を入力し、Enterキーを押します場合は、私のページがリロードされます：ここでは一例です。このファイルは.cfmファイルとして保存されます。私はonClickとonKeypressの両方でsearchUser()の機能を実行したいと思います。もしこれがどのように達成できるのか分かっている人は、私に知らせてください。

Answer 1

jQueryを使用しているので、インラインイベントハンドラを使用しないでください。関数を定義し、フォームが以下のように提出されたときにそれを呼び出す：

function searchUser(e) { 
 
    e.preventDefault(); 
 
    alert ("Do your ajax here instead of alert..."); 
 
} 
 

 
$("#searchForm").on("submit", searchUser);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form name="searchForm" id="searchForm" action="#" method="POST"> 
 
\t <div> 
 
\t \t <input type="text" name="searchFld" id="searchFld" size="24" maxlength="24" value="" title="Maximum size of the field is 24 characters." placeholder="Example: John, Miller" /> 
 
\t </div> 
 
\t <div> 
 
\t \t <input type="submit" name="searchBtn" id="searchBtn" value="Search"/> 
 
\t </div> 
 
</form>

注：フォームから

• 削除インラインイベントハンドラ
• 変更ボタン送信するタイプ。

Answer 2

サーバーとの通信にAJAXを使用している場合は、メソッド、アクション、および送信コールバックをフォームから完全に除外した方がよい場合があります。これは、ページリロードのデフォルトの送信動作を引き起こす原因です。代わりに、検索フィールド自体にリスナーを接続します。これは、Enterキーの押下を待ち受けます。

$('#searchBtn').on('click', searchUser); 

$('#searchFld').on('keypress', function(e){ 
    e.preventDefault(); 
    if(e.code == 'Enter'){ 
     searchUser(); 
    } 
}); 


function searchUser(){ 
    // search for the user 
}