2

単純なフォームがあります。送信ボタンを押すと、データベースにクエリを実行して基本的なテキストを返すjqueryAJAXリクエストが発生します。

それはうまくいきますが、私がやりたいのは、Enterボタンもフォームを送信することです。簡単に思えますが、私にはうまくいきません。

以下はフォームです：

    <form method="post" action="" name="statusform" id="statusform">
        <fieldset id="quote_reference">
            <legend>Check Quote Status:</legend>
            <div id="enter_ref_div">
                <br />
                <br />
                <br />
                <br />                  
                <label for="reference" accesskey="R">Your Reference Number:</label>
                <input name="ref" id="ref" type="text" size="5" value="" /> <br /><br />
                <button type="button" id="checkStatus" class="calc_btn">Check Status</button><div id="loader"><img class="loader_gif" src="assets/ajax-loader.gif" /></div>
            </div>
        </fieldset>
        <fieldset id="quote_status_div">
            <legend>Your Quote Status:</legend>     
            <div id="status_result"></div>
        </fieldset>
    </form>

以下は、ボタンを押すと起動するjquery関数で、完全に機能します

$('#checkStatus').click(function() {

    var refNo = $("#ref").val();

    $('#loader').fadeIn('fast');

    $.ajax({
        type: "POST",
        url: "functions/functions.php",
        data: "ref_no="+ refNo,
        success: function(data){
            $('#loader').fadeOut('fast');
            $('#quote_reference').slideUp('fast');
            $('#status_result').html(data);
            $('#quote_status_div').slideDown('fast'); 
        }
    });     


});

今私がしたいのは、押されているリターン/エンターキーで上記の機能を模倣することです。以下は私が試しているコードです：

$(document).keypress(function(event){

var keycode = (event.keyCode ? event.keyCode : event.which);

    if(keycode == '13'){

        var refNo = $("#ref").val();

        $('#loader').fadeIn('fast');

        $.ajax({
            type: "POST",
            url: "functions/functions.php",
            data: "ref_no="+ refNo,
            success: function(data){
                $('#loader').fadeOut('fast');
                $('#quote_reference').slideUp('fast');
                $('#status_result').html(data);
                $('#quote_status_div').slideDown('fast'); 
            }
        });     
    }

}）;

私がインターネットで見つけたすべての情報は、これがうまくいくはずだと教えてくれます。私のためにこれに何か光を当てることができますか？

ありがとう

4

3 に答える 3

0

ボタンを送信に変更し、submit メソッドを使用します。

$('#checkStatus').submit(function() {
  // do ajax call here
  // ...
  return false;
}))

忘れないでください：return false送信をブロックします

于 2012-10-08T16:09:02.733 に答える
0

このアプローチを試してみてください。Enter キーを押すとクリック イベントがトリガーされます。コードを再度記述する必要はありません。

$(document).keypress(function(event){
   event.preventDefault();
   var keycode = (event.keyCode ? event.keyCode : event.which);
    if(keycode == '13'){

       $('#checkStatus').click();
    }
});

アラートを配置し、Enter キーを押したときにそのアラートが表示されるかどうかを確認します。コンソール セクションでエラーがないか確認します。

また、.on() を使用して、要素にイベントを添付してみてください。

$(document).on('keypress' ,function(event){

$('#checkStatus').on('click' , function() {
于 2012-10-08T16:11:31.610 に答える
0

フォームが正常に送信されないようにする場合は、入力キーかどうかを確認した後に event.PreventDefault() を呼び出す必要があります。

于 2012-10-08T16:13:40.023 に答える