Reputation: 3166
I have a couple of input textboxes on my webpage for searching:
<input type="text" id="mfrText" name="MfrSearchText" value='@ViewBag.SearchAndSort.MfrSearchText' />
<input type="text" id="partText" name="PartNoSearchText" value="@ViewBag.SearchAndSort.PartNoSearchText" /> </
<input type="text" id="descText" name="DescriptionSearchText" value="@ViewBag.SearchAndSort.DescriptionSearchText" />
I have a button that has a click event to show a dialog box.
<button class="btnAdd btn-xs">Add</button>
The issue I have is when the enter key is hit and one of the input fields has the focus, the button onclick event is fired and the dialog box is displayed. I have tried e.preventDefault() and I have also tried checking if the enter key was pressed instead of a mouse click with no luck. This happens in IE but not in Chrome. How do I prevent this behavior ?
My click event:
$(".btnAdd").click(function (e) {
alert($(".btnAdd").is(":focus"));
var partID = $(this).closest('tr').attr('id');
$("#divAdd").dialog({
modal: true,
title: 'Increase Qty',
buttons: {
"Save": function () {
var qty = $("#addQtyAdd").val();
var clockNo = $("#addClockNo").val();
var asset = $("#addAssetNo").val();
AddPart(partID, qty, clockNo, asset);
},
Cancel: function () {
$(this).dialog("close");
}
}
});
$(".ui-dialog-title").css("color", "lightgreen");
});
Upvotes: 6
Views: 3829
Reputation: 324680
That is desired/intended behaviour.
Try:
<button type="button" class="btnAdd btn-xs">Add</button>
This will stop the button from being seen as a submit control, and will be ignored by Enter keypresses.
Upvotes: 12