Associating input elements with certain buttons in a form?

Question

http://jsfiddle.net/EGjc9/

I have several <button> elements on a page, and I need to associate the <input> elements nearest them to those buttons. Right now, when you hit ENTER on any input field, it fires the first <button> in the form. How do I change this?

DOM:

<form action="irrelevant">
<div>
<select><option>1</option><option>2</option><option>3</option></select>
    <input type='text'/>
    <button>Hello</button>
</div>
<div>
    <select><option>1</option><option>2</option><option>3</option></select>
    <input type='text'/>
    <button>Hello</button>
</div>
<div>
    <select><option>1</option><option>2</option><option>3</option></select>
    <input type='text'/>
    <button>Hello</button>
</div>
<div>
    <select><option>1</option><option>2</option><option>3</option></select>
    <input type='text'/>
    <button>Hello</button>
</div>
</form>

DOM Ready:

$('button').click( function(){ 
$(this).siblings().filter('select').val('3');
    return false;
});

Answer 1

You need to use KeyPress event to catch "Enter" key pressed and then push the button you want using javascript.

For example:

//some key is pressed
$('input').keypress( function(event){ 
   //is this "Enter"?
   if (event.keyCode == '13') {
     //finding the button inside the same <div> and clicking on it
     $(this).parent().find('button').click();
     //we don't need a default action
     event.preventDefault();
   }
});

Answer 2

something like this:

$('input').bind('keypress', function(e){
     if(e.which == 13) { //Enter keycode
       $(this).next().click()
     }
     return false;
});

fiddle