I have html being rendered using Razor in an MVC project. The html itself is on a bootstrap modal, so you click a button, and a modal loads with the following code:
<div class="modal-dialog" id="showDetailsForm">
<div class="modal-content" id="formEditDetails">
<div class="modal-header">
<a class="close" data-dismiss="modal" aria-hidden="true">×</a>
<h2>Event Details</h2>
</div>
<div class="modal-body">
<div class="form-group">
@Html.ValidationSummary()
</div>
<div class="form-group">
@Html.LabelFor(m => Model.Calendar.EventName, new { @class = "control-label" })
@Html.TextBoxFor(m => Model.Calendar.EventName, new { @id = "SelectedEventTitle", @class = "form-control formTextBox" })
</div>
<div class="form-group">
@Html.LabelFor(m => Model.Calendar.DateScheduled, new { @class = "control-label" })
@Html.TextBoxFor(m => Model.Calendar.DateScheduled, new { @id = "SelectedDateTime", @class = "form-control formTextBox", @readonly = "readonly" })
</div>
<div class="form-group">
@Html.LabelFor(m => Model.Calendar.TimeScheduled, new { @class = "control-label" })
@Html.TextBoxFor(m => Model.Calendar.TimeScheduled, new { @id = "SelectedTime", @class = "form-control formTextBox", @readonly = "readonly" })
</div>
<div class="form-group">
@Html.LabelFor(m => Model.Calendar.EventLength, new { @class = "control-label" })
@Html.TextBoxFor(m => Model.Calendar.EventLength, new { @id = "SelectedAppointmentLength", @class = "form-control numericOnly formTextBox" })
</div>
</div>
<br />
<br />
<div class="modal-footer">
<input type="submit" value="Save" id="btnSaveDetailsReferral" class="parsButton" />
<input type="button" value="Cancel" id="btnShowDetailsCancel" class="parsButton" aria-hidden="true" data-dismiss="modal" />
</div>
</div>
</div>
That's all fine, it acts and looks how is should. My problem is on the line
@Html.TextBoxFor(m => Model.Calendar.EventLength, new { @id = "SelectedAppointmentLength", @class = "form-control numericOnly formTextBox" })
I want this textbox to only allow numeric input. I know I can use validation when I submit the form, but I don't want to do it that way, I want only numbers to actually appear in the box when typing, if you type or paste anything else, they won't work. I tried @type="number", which didn't work. I also have the following jquery code, which actually works on another part of the project:
$(".numericOnly").bind('keypress', function (e) {
if (e.keyCode == '9' || e.keyCode == '16') {
return;
}
var code;
if (e.keyCode) code = e.keyCode;
else if (e.which) code = e.which;
if (e.which == 46)
return false;
if (code == 8 || code == 46)
return true;
if (code < 48 || code > 57)
return false;
});
//Disable paste
$(".numericOnly").bind("paste", function (e) {
e.preventDefault();
});
$(".numericOnly").bind('mouseenter', function (e) {
var val = $(this).val();
if (val != '0') {
val = val.replace(/[^0-9]+/g, "");
$(this).val(val);
}
});
But for some reason, it doesn't work on this textbox within the modal. It works on other textboxes that aren't in modals, exactly as expected. Can anybody identify what the problem is, or what I'm doing wrong?