CODEWITHSUNDEEP
javascriptjquery
StealthRT
StealthRT

Reputation: 10542

jQuery and digging down elements for a keypress event

Hey all I want to be able to hit the enter when I am on either a dropdown box (select box) or a normal text field box.

My current HTML code looks like:

<tr class="jsgrid-edit-row">
   <td class="jsgrid-cell jsgrid-align-left" style="width: 100px;">
      <select>
         <option value="1">SW</option>
         <option value="2">HW</option>
      </select>
   </td>
   <td class="jsgrid-cell jsgrid-align-left" style="width: 80px;">
      <input type="text" />
   </td>
   <td class="jsgrid-cell jsgrid-align-left" style="width: 100px;">
      <select>
         <option value="1">COMPUTER</option>
         <option value="2">MONITOR</option>
         <option value="3">NETWORK COMPONENTS</option>
         <option value="4">OFFICE EQUIPMENT</option>
         <option value="5">SOFTWARE</option>
         <option value="6">STORAGE</option>
      </select>
   </td>
   <td class="jsgrid-cell jsgrid-align-left" style="width: 80px;">
      <input type="text" />
   </td>
   <td class="jsgrid-cell jsgrid-align-left" style="width: 80px;">
      <input type="text" />
   </td>
   <td class="jsgrid-cell jsgrid-align-left" style="width: 80px;">
      <input type="text" />
   </td>          
</tr>

I've tried doing the following:

$('.jsgrid-edit-row > input').keypress(function (e) {
    var key = e.which;

    console.log(e.which);

    if (key == 13)  // the enter key code
    {
        console.log('hit enter!');
        return false;
    }
});

Using .jsgrid-edit-row > input I figured it would find that class and then move to its child and look for any input element that I was currently on?

So what am I doing incorrectly?

Upvotes: 1

Views: 175

Answers (2)

PotatoManager
PotatoManager

Reputation: 1775

Use this instead

$('.jsgrid-edit-row input').keypress(function (e) {

This syntax searches for all input tags present inside the jsgrid-edit-row class

Upvotes: 0

Shiladitya
Shiladitya

Reputation: 12181

Here you go with one more solution https://jsfiddle.net/q7r4ccb4/1/

$('.jsgrid-edit-row > td > input').keypress(function (e) {
    var key = e.which;

    console.log(e.which);

    if (key == 13)  // the enter key code
    {
        console.log('hit enter!');
        return false;
    }
}); 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr class="jsgrid-edit-row">
   <td class="jsgrid-cell jsgrid-align-left" style="width: 100px;">
      <select>
         <option value="1">SW</option>
         <option value="2">HW</option>
      </select>
   </td>
   <td class="jsgrid-cell jsgrid-align-left" style="width: 80px;">
      <input type="text" />
   </td>
   <td class="jsgrid-cell jsgrid-align-left" style="width: 100px;">
      <select>
         <option value="1">COMPUTER</option>
         <option value="2">MONITOR</option>
         <option value="3">NETWORK COMPONENTS</option>
         <option value="4">OFFICE EQUIPMENT</option>
         <option value="5">SOFTWARE</option>
         <option value="6">STORAGE</option>
      </select>
   </td>
   <td class="jsgrid-cell jsgrid-align-left" style="width: 80px;">
      <input type="text" />
   </td>
   <td class="jsgrid-cell jsgrid-align-left" style="width: 80px;">
      <input type="text" />
   </td>
   <td class="jsgrid-cell jsgrid-align-left" style="width: 80px;">
      <input type="text" />
   </td>          
</tr>
</table>

Upvotes: 1

Related Questions