addNewRow with Enter Key via javascript

Question

I have the following code :

$(document).on('keypress', ".addNewRow", function(e){
    var keyCode = e.which ? e.which : e.keyCode;
    if(keyCode == 9 ) addNewRow();
});

Upon pressing "Tab" this code executes addNewRow (which adds table data). This works perfect. I want to alter this to make it work with "Enter", so I modified as follows :

$(document).on('keypress', ".addNewRow", function(e){
    var keyCode = e.which ? e.which : e.keyCode;
    if(keyCode == 9,13 ) addNewRow();
});

For some odd reason, this does not work as expected. Is there a different way of doing this that I am missing? *Banging head on wall

Edit : Also have tried this :

$(document).on('keypress', ".addNewRow", function(e){
    var keyCode = e.which ? e.which : e.keyCode;
    if(keyCode == 9||13 ) addNewRow();
});

Form Code(To prevent submit on enter) :

<script type="text/javascript">
function tabE(obj, e) {
  var e = (typeof event != 'undefined') ? window.event : e; // IE : Moz

  var self = $(obj),
    form = self.parents('form:eq(0)'),
    focusable, next;

  if (e.keyCode == 13) {
    focusable = form.find('input,a,select,button,textarea').filter(':visible');
    next = focusable.eq(focusable.index(obj) + 1);
    if (!next.length) {
      next = focusable.first();
    }
    next.focus();
    return false;
  }
}
</script>
<!-- Prevent Enter from Submitting Form -->
<script>
                    $(document).on("keydown", "input", function(e) {
                    if (e.which==13) e.preventDefault();
                    });
                    </script>
    <!-- Begin page content -->

Try "keyCode == 9 || keyCode == 13" – Mic Jan 11 '16 at 16:33 — Mic, Jan 11 '16 at 16:33

score 3 · Answer 1 · answered Jan 11 '16 at 16:33

3

Proper or statement:

if (keyCode == 9 || keyCode  == 13)

answered Jan 11 '16 at 16:33

tymeJV

103,943
14
161
157

Thanks for the proper syntax, for some reason, it is still not working...? The tab key still works a charm though – Steven Jan 11 '16 at 16:35
@Steven When you say "it's not working", in what way? Random guess, but are your input elements within a `
`? Hitting enter may be submitting the form?
– James Thorpe Jan 11 '16 at 16:37
@Steven [See this question](http://stackoverflow.com/questions/895171/prevent-users-from-submitting-form-by-hitting-enter). – James Thorpe Jan 11 '16 at 16:38
I have both that code, and code to convert enter to tab – Steven Jan 11 '16 at 16:40

score 1 · Accepted Answer · edited May 16 '16 at 04:12

1

https://jsfiddle.net/8bzn43r6/ Please see the example in the link

<table>
<tbody>
  <tr>
    <td><input type = "text" id="username"/></td>
  </tr>
</tbody>
</table>

$(document).ready(function(){
    var count = 0;

  function addNewRow(){
    console.log("Added ROW" + count++);
    $("<tr><td><input type='text' id='username'/><td/><tr/>").appendTo("tbody");
  }

    $('tbody').on('keydown','#username',function(e){
     if(e.keyCode == 9 || e.keyCode == 13) addNewRow();
  });

});

Working like a charm

edited May 16 '16 at 04:12

answered Jan 11 '16 at 17:11

A0__oN

8,740
6
40
61

Thanks! I don't know what I did wrong, but I rewrote what I had with yours and it fixed... – Steven Jan 11 '16 at 17:17
btw, would you know how to skip a checkbox on focus of the new row? – Steven Jan 11 '16 at 17:17
My addRow function creates an html += on the first form field of the next row, in addition to more inputs. I would like to skip the first input after implementing the addRow function. – Steven Jan 11 '16 at 17:21

score -3 · Answer 3 · answered Jan 11 '16 at 16:34

-3

do you want your if as an OR?

if(keyCode == 9 || keyCode == 13 )

or as an AND?

if(keyCode == 9 && keyCode == 13 )

answered Jan 11 '16 at 16:34

chemical_elii

155
1
11

That AND condition will always yield a false. – Mic Jan 11 '16 at 16:35

addNewRow with Enter Key via javascript

3 Answers3