How to trigger the button when user click enter key using Jquery?

Question

I have a

TextBox (id=txtFilterValue),

Add button (id=btnAdd) and

Table (id=queryTable)

once user enter the value in text box, they may press the enter key. So when they press the enter key, it should call the Add Button which is already defined in jquery.

This is What I tried

Jquery Code

    //Preventing ENTER Key
$('#form1').on('keyup keypress', function (e) {
    var keyCode = e.keyCode || e.which;
    if (keyCode === 13) {
        //$('input[name = btnAdd]').click();
        $("#btnAdd").trigger('click');
        e.preventDefault();
        return false;
    }
});

The above code to prevent the enter key and it will call the Add Button.

As I thought it's working. But it's calling two times and the values are adding 2 times. It shouldn't add two times.

when I click the Add button directly, it's entering the record only one to my table.

This is my button Add code

    //Filter Query Add to TABLE and TEXTBOX
$("#btnAdd").click(function () {
    
    var selectedField = $("#FilterField option:selected").text();
    var operator = $("#ddlOperator :selected").val();
    var filterValue = $("#txtFilterValue").val();
    var query;
    var textFilterRecord = $("#txtFilterRecord").val();

    //values seperated by COMMA
    var arrayTxtConditionValue = filterValue.split(',');

    if (operator == 'equalTo') {
        
        if ($("#txtFilterRecord").val().length == 0) {

            //put the single quotation( ' ) in between values
            var filterCommaValue = '';
            for (var i = 0; i < arrayTxtConditionValue.length; i++) {
                if (i == 0) {
                    filterCommaValue = filterCommaValue + "'" + arrayTxtConditionValue[i] + "'";
                }
                else {
                    filterCommaValue = filterCommaValue + ",'" + arrayTxtConditionValue[i] + "'";
                }
            }

            query = selectedField + ' IN(' + filterCommaValue + ') ';
            $("#txtFilterRecord").val($("#txtFilterRecord").val() + query);

            $("#queryTable > tbody:last-child").append('<tr><td class="FieldNameID">' + selectedField + '</td><td class="OperatorID"> IN(' + filterCommaValue + ')</td></tr>');
        }
        else {

            var filterCommaValue = '';
            for (var i = 0; i < arrayTxtConditionValue.length; i++) {
                if (i == 0) {
                    filterCommaValue = filterCommaValue + "'" + arrayTxtConditionValue[i] + "'";
                }
                else {
                    filterCommaValue = filterCommaValue + ",'" + arrayTxtConditionValue[i] + "'";
                }
            }

            var radioButton = $('input[name=group]:checked').val();
            query = radioButton + ' ' + selectedField + ' IN(' + filterCommaValue + ') ';
            $("#txtFilterRecord").val($("#txtFilterRecord").val() + query);

            $('#queryTable > tbody:last-child').append('<tr><td class="FieldNameID">' + radioButton + ' ' + selectedField + '</td><td class="OperatorID"> IN(' + filterCommaValue + ')</td></tr>');
        }
    }
});

Why negative marks?..

user7456202
– user7456202

2017-02-05 06:39:55 +00:00
Commented Feb 5, 2017 at 6:39 — user7456202
– user7456202, Commented Feb 5, 2017 at 6:39

ibrahim mahrir · Accepted Answer · 2017-02-05 06:26:11Z

1

$('#form1').on('keyup keypress', function (e) {
    // ...

Here you are listening for two events with the same callback. That means whenever one of them occur the callback will be called. Since they're both related to the key events (both are pretty much the same), the callback will be called twice.

So just remove one of them like this:

$('#form1').on('keypress', function (e) {
    // ...

answered Feb 5, 2017 at 6:26

ibrahim mahrir

31.8k5 gold badges50 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to trigger the button when user click enter key using Jquery?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related