Grid Filter Causes Form Submission On Page

[nromanel]

I have the following code that applies a filter to my Grid:


paging.add('-', 'Search: '); // add a separator followed by a text string to label the filter input
var filter = Ext.get(paging.addDom({ // add a DomHelper config to the toolbar and return a reference to it
tag: 'input'
, type: 'text'
, size: '30'
, value: ''
, cls: 'x-grid-filter'
}).el);
filter.on('keypress', function(e) { // setup an onkeypress event handler
if(e.getKey() == e.ENTER) // listen for the ENTER key
ds.load({ // call the load() method of your datastore
params: {
start: 0 // reset the start to 0 since you want the filtered results to start from the first page
, limit: 12
}
});
});
filter.on('keyup', function(e) { // setup an onkeyup event handler
var key = e.getKey(); // assign the current key to a local variable
if((key == e.BACKSPACE || key == e.DELETE) && this.getValue().length == 0) // listen for the BACKSPACE or DELETE keys and the field being empty
ds.load({ // call the load() method of your datastore
params: {
start: 0 // reset the start to 0 since you want unfiltered results to start from the first page
, limit: 12
}
});
});
filter.on('focus', function(){this.dom.select();}); // setup an onfocus event handler to cause the text in the field to be selected

ds.on('beforeload', function() {
ds.baseParams = { // modify the baseParams setting for this request
filter: filter.getValue() // retrieve the value of the filter input and assign it to a property named filter (rename to suit your needs)
};
});


However, upon hitting enter in the search box, a form that I have declared on the page submits. There is no action in the Form to do this. What am I missing?
Here is the form code:

<form id="listUpdate" name="listUpdate" action="./ajax/editlist.php" method="POST">
<span class="fancy_link">List Name:<font color="#FF0000">*</font><br>
<input type="hidden" name="listid" value="$listid">
<input type="text" size="40" name="Name" value="$listName">
<p>
List Description:<br>
<textarea name="Description" rows="5" cols="35" wrap="virtual" onKeyDown="textCounter(this.form.Description,255);" onKeyUp="textCounter(this.form.Description,255);">$listDescription</textarea>
<br>
<font size="1">(You may enter up to 255 characters.)</font>
<p>
Make Private: <select size="1" name="Private">
<option value="0">No</option>
<option value="1">Yes</option>
</select></span>

<p>
<input type="submit" value="Update" name="Update"> <input type="reset" value="Reset" name="Reset">
<br><font color="#FF0000">*</font> = Required</font>
</form>


The textCounter Function:
function textCounter(field, maxlimit)
{
if (field.value.length > maxlimit) // if too long...trim it!
field.value = field.value.substring(0, maxlimit);
}

Any ideas?

Thanks!!