NOTE: I've already seen some solutions on this forum, but they don't apply in my specific case.
In my app, the user always edit the data using a modal window. When the modal first open, there is only one "Close" button visible. If the user changes any text, this button is immediately hidden and the "Cancel" and "Save" buttons become visible. The only way, that I know of, to implement this approach, is to hook up an event to all of the text controls. The quantity of text controls vary in the forms, but no more than 50. I will need to "id" and hoop up the "change" event into each one of the controls in the form. My question is, if there is a simpler way of doing it? like an event if anything in the form changes? It is OK if the user changes the data and then changes it back and the event is fired anyway.
@using (Html.BeginForm("", "", FormMethod.Post, new { @id = "formPostUnitDetails", @style = "padding-right:5px" }))
{
@Html.AntiForgeryToken()
@Html.ValidationSummary(true, "", new { @class = "text-danger" })
@Html.HiddenFor(model => model.IdNo)
@Html.LabelFor(m => m.UnitNo)
@Html.TextBoxFor(m => m.UnitNo, new { @id="txtUnitNo")
//..... 49 more text controls
<div class="panel-footer" style="margin-top:5px;">
<input id="btnCancel" type="button" class="btn btn-danger" data-dismiss="modal" value="CANCEL" style=" display: none;" />
<input id="btnSave" type="button" class="btn btn-success" value="SAVE CHANGES" style=" display: none;" />
<input id="btnClose" type="button" class="btn btn-info" data-dismiss="modal" value="CLOSE" />
</div>
$(document).on("change", "#txtUnitNo", function () { EnableButtons(); })
// 49 more text controls
function EnableButtons() {
$("#btnCancel").show();
$("#btnSave").show();
$("#btnClose").hide();
}
check-dirty
, then you only need a single selector. You may also want to hook to thekeydown
andpaste
events for better coverage.