Clicking the enter key/return key should trigger the submit button

Question

I am trying to add the items using the submit button click event. Right now I am trying to implement it so that when you enter the number to the input and hit enter, it should trigger the submit button and add the item to the table. I used the keypress event and it is not working. Here is my sample code.

I think I am doing something wrong. My code below.

// json data object var data = JSON.parse('{ "122233334444": ["Book","Three Musketters","DE7598490587","7584092043857", "03/18/13 11:17:51 AM","03/18/13 11:17:51 AM", "1" ], "122223355552":["eBook","Fall Colors","XYZ29494949","7584092043857", "03/18/13 11:17:51 AM","03/18/13 11:17:51 AM", "2" ], "122223355533":["eBook","Snowfall","XYZ29494949","7584092043857", "03/18/13 11:17:51 AM","03/18/13 11:17:51 AM", "3" ] }'); $("#submitid").keypress(function() { $('#resend').prop('disabled', false); $('#receipt').prop('disabled', false); var rowId = $("#number").val(); $("#number").val(""); var rowData = data[rowId]; if (rowData) { var tr = $("<tr><td><input id='item-id' type='checkbox' checked/></td></tr>").attr("id", "datatable-row-" + rowId); for (var col = 0; col < rowData.length; col++) tr.append($("<td></td>").text(rowData[col])); $("#datatable").prepend(tr); $("#datatable").show(); } else { alert("Row doesn't exist in json object: " + rowId); } }); $('#receipt').click(function() { $('.column-id').removeAttr('checked'); $('#resend').prop('disabled', true); $('#receipt').prop('disabled', true); });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input id="number" type="text" /> <button id="submitid">Submit</button> <table id="datatable"> <colgroup> <col><col><col><col><col><col><col><col> </colgroup> <thead> <tr> <th rowspan="1" colspan="1"> <input type="checkbox" class="select-all column-id" id="item-id" title="Select All"> </th> <th rowspan="1" colspan="1"> <div> <span><a href="#" title="">Format</a></span> </div> </th> <th rowspan="1" colspan="1"> <div> <span><a href="#" title="">Title</a></span> </div> </th> <th rowspan="1" colspan="1"> <div> <span><a href="#" title="">Number</a></span> </div> </th> <th rowspan="1" colspan="1"> <div> <span><a href="#" title="">Code</a></span> </div> </th> <th rowspan="1" colspan="1"> <div> <span><a href="#" title="">Checkout Date</a></span> </div> </th> <th rowspan="1" colspan="1"> <div> <span><a href="#" title="">Due Date</a></span> </div> </th> <th rowspan="1" colspan="1"> <div> <span><a href="#" title="">ItemId</a></span> </div> </th> </tr> </thead> <tbody> <tr> <td><input id="item-id" class="column-id" type="checkbox"></td> <td>Book</td> <td>Three Musketters</td> <td>DE7598490587</td> <td>7584092043857</td> <td>03/18/13 11:17:51 AM</td> <td>03/18/13 11:17:51 AM</td> <td>1</td> </tr> </tbody> </table> <button id="resend" disabled>Resend</button> <button id="receipt" disabled>Receipt</button>

Any suggestions?

krish

You are doing something wrong, you are not posting any code. Don't expect people to just follow your link. — Matt Burland
– Matt Burland, Commented Jul 26, 2013 at 14:51

Konstantin Dinev · Accepted Answer · 2013-07-26 14:52:03Z

3

You need to handle keydown or keypress on the input not on the submit button:

$('#number').keydown(function (event) { if (event.keyCode === 13) { // Enter was pressed } });

answered Jul 26, 2013 at 14:52

Konstantin Dinev

35k14 gold badges79 silver badges103 bronze badges

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

2 Comments

canon Over a year ago

Isn't it keyCode === 13?

Konstantin Dinev Over a year ago

@canon Yes I typed 2 instead of 1. I will fix it.

Praveen · Accepted Answer · 2013-07-26 15:04:59Z

Following are the things you should know
1) You need to know to keycode of enter key (which is 13)

2) Since you tagged jQuery, learn event.which, this property indicates the specific key or button that was pressed.

3) .trigger(), execute all handlers and behaviors attached to the matched elements for the given event type.

$("#number").on('keypress', function (e) { if(e.which == 13) { // check keycode condition $('#submitid').trigger('click'); } else { //Todos } e.preventDefault(); //Toprevent bounce });

@krishyalla you doing wrong. onkeypressing textbox triggers click event of #submitid. But I dont see any 'click' event for submit button

Collectives™ on Stack Overflow

Clicking the enter key/return key should trigger the submit button

2 Answers 2

2 Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Related