Form submit / Jquery Event problem

Ok: i have a dynamic form like this:

<div id="container">
<div id="autosuggest">...</div>
<form action="" method="post" id="inputForm">
    <table>
        <thead>
            <tr>
                <th>amount</th>
                <th>name</th>
                <th>discount</th>
                <th>vat</th>
                <th>price</th>
                <th>comment</th>
                <th>&nbsp;</th>
            </tr>
        </thead>
        <tbody>
            <tr id="row1">
                <td><input type="text" name="amountRow1" id="amountRow1" value=""/></td>
                <td>Product name 1 </td>
                <td><input type="text" name="discountRow1" id="discountRow1" value=""/></td>
                <td>
                    <select id="vatRow1" name="vatRow1">
                        <option value="10">10%</option>
                        <option value="20">20%</option>
                        <option value="30">30%</option>
                    </select>
                </td>
                <td><input type="text" name="priceRow1" id="priceRow1" value=""/></td>
                <td><input type="text" name="commentRow1" id="commentRow1" value=""/></td>
                <td><button class="trashButton"></button>
            </tr>
            <tr id="row2">
                <td><input type="text" name="amountRow2" id="amountRow2" value=""/></td>
                <td>Product name 2 </td>
                <td><input type="text" name="discountRow2" id="discountRow2" value=""/></td>
                <td>
                    <select id="vatRow2" name="vatRow2">
                        <option value="10">10%</option>
                        <option value="20">20%</option&g开发者_运维知识库t;
                        <option value="30">30%</option>
                    </select>
                </td>
                <td><input type="text" name="priceRow2" id="priceRow2" value=""/></td>
                <td><input type="text" name="commentRow2" id="commentRow2" value=""/></td>
                <td><button class="trashButton"></button>
            </tr>
        </tbody>
    </table>
    <input type="submit" id="submitForm" name="submitForm" value="submit">
</form>

some things to clarify:

1. Each row is different from another by a unique timestamp, in this example simplified as row1, row2, etc...
2. The container div is actually a div which is placed in a jquery-ui-dialog
3. The autosuggest div has some other stuff in it needed for a simple autosuggest
4. Each row is dynamically added using the autosuggest, keeping each row unique using the timestamp
5. Each row has a button with class='trashButton' which is a jquery-ui-button, the obvious purpose of the button is to remove the row from the table.
6. There is no action value specified for the form since the form is handled with an ajaxcall

The button eventhandler:

$(document).ready(function(){
    $(".trashButton").live('click', function(){
        removeProduct(this);
        return false
    });
})

Now the issue is the following:

When my cursor is in any input field in the table, and i press the enter button. The first row gets removed from the table. No matter where the focus/cursor is at the time, its always the first row that gets removed.

The fact is, there shouldnt be ANY row removed on pressing the enter button. Instead if anything should happen at all, the form should try to submit.

On the other hand, when my cursor/focus is in the autosuggest inputfield and i press enter: nothing happens, which is exactly what i wanted. When i click the 'trashButton' the correct row DOES get removed: also how it's supposed to work.

I've debugged all i could think of which could cause the problem concerning the autosuggest plugin or wrong closing tags or anything simple and alike (what i mean is, i've debugged most obvious things i could think of).

So in short: i have no idea as to why my removeProduct() get's triggered at all, or,even worse, having it delete the first row all the time instead of the actually focussed row(which would make more sense). I'm not really sure how to capture the triggered eventhandler when i press the enter button so i have no clue how to debug this.

All help or suggestions would be much appreciated,

Cheers,

Bodybag

edit:

@Ed Fryed: Thank you for the quick reply. Problem solved! Changed the button into an anchor which made the enterpress trigger the formsubmit. Cancelled the form submit using preventDefault(). But now i got the submit function cancelled for every form using the following:

$("#inputForm").keypress(function(event){
   if(event.which===13){
       event.preventDefault();
    }
})

Vote would be granted if i had more rep xD

Btw help on the new issue would be more then lovely,

cheers bodybag

I could be wrong but when dealing with forms pressing the enter button triggers the first button in the form. In your case the first button encountered is the trash button to the first row.

two options.

first(and the one i would choose)

make your trash buttons a div or link or some other element. as they dont actually need to be buttons.

second. if they really have to be buttons then you will have to detect enter being pressed and stop its default.

Are you using IE? In IE, form submissions work a little different. I think when you press enter it will find the first button and click it.

1. Try specifying an action on the form, maybe then it'll correctly pick up the input type="submit" instead of the button.
2. Instead of buttons, use links to remove the row. Much easier to keep separate from form events.
3. In general, to debug these things, just hook into the form submission and other relevant events. Then fire up any javascript debugger (firebug, chrome's built in, etc.) and put breakpoints on the event handlers.

EDIT: (for the new problem)

$("#inputForm").submit(function(event){
   if(event.which===13 && $(event.target).attr('id') != "submitForm"){
       event.preventDefault();
   }
})

Sorry, I haven't tested this, but hopefully it'll give you a hint in the right direction.