单击输入键/返回键应触发提交按钮

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

Answer 1

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
    }
});

Answer 2

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
});