Prevent POST on Enter Key Press in the ComboBox
Environment
| Product | Progress® Kendo UI® ComboBox for jQuery |
| Operating System | Windows 10 64bit |
| Visual Studio Version | Visual Studio 2017 |
| Preferred Language | JavaScript |
Description
How can I prevent POST on an Enter key press in a Kendo UI ComboBox?
Solution
The following example demonstrates how to achieve the desired scenario.
<div id="example" role="application">
<form>
<h4>T-shirt Fabric</h4>
<input id="fabric" placeholder="Select fabric..." />
<h4>T-shirt Size</h4>
<select id="size" placeholder="Select size...">
<option>X-Small</option>
<option>Small</option>
<option>Medium</option>
<option>Large</option>
<option>X-Large</option>
<option>2X-Large</option>
</select>
<br/>
<button class="k-button" id="get">Post</button>
</form>
<script>
$(document).ready(function() {
// create ComboBox from input HTML element
$("#fabric").kendoComboBox({
dataTextField: "text",
dataValueField: "value",
dataSource: [
{ text: "Cotton", value: "1" },
{ text: "Polyester", value: "2" },
{ text: "Cotton/Polyester", value: "3" },
{ text: "Rib Knit", value: "4" }
],
filter: "contains",
suggest: true,
index: 3
});
// create ComboBox from select HTML element
$("#size").kendoComboBox();
var fabric = $("#fabric").data("kendoComboBox");
var size = $("#size").data("kendoComboBox");
function preventPost(e) {
if (e.keyCode === 13) {
e.preventDefault();
}
}
fabric.input.keydown(preventPost);
size.input.keydown(preventPost);
});
</script>
</div>