Question

I have a simple form, that when the submit button is pressed, it fires a jquery AJAX request that queries the database and returns some basic text.

It works fine, but what i want to do is have the enter button also submit the form, whcih seems easy, but its not working for me.

Below is the form:

    <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>

Below is the jquery function that fires on the button press, which works perfectly

$('#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'); 
        }
    });     


});

Now all i want to do is mimic the above function on the return/enter key being pressed. Below is the code I am trying:

$(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'); 
            }
        });     
    }

});

All the information that I’ve foudn around the internet tells me this should work. Can you shed any light on this for me?

Thanks

Answer 1

Try this approach.. trigger the click event when you press Enter.. It is not required to write up the code again..

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

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

Place an alert and check if you see that alert when enter key is pressed.. Check for any errors in the console section.

Also try using .on() to attach events to your elements..

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

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