How to detect if data in the form has been changed ? MVC

Question

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();
}

Answer 1

Instead of hooking up event handlers to each input you have, you could instead hook up an event to all inputs.

$('form input[type="text"]').on('change', function() {
    EnableButtons();
});

This works as the selector form input[type="text"] selects all input elements (of type text) within a form, and then binds a change event handler to them.

One other option is to assign all of the inputs you want to monitor a class such as change-monitored and then you can change your selector to $('.change-monitored').on(...)

---

Demo

 $('.changable').on('change', function(e) { $('#log').append(e.target.id + ' changed to ' + $(e.target).val() + '<br/>'); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form> <input type="text" class="changable" id="input1" /> <input type="text" class="changable" id="input2" /> <input type="text" class="changable" id="input3" /> <input type="text" class="changable" id="input4" /> <input type="text" class="changable" id="input5" /> </form> <div id="log"></div> 

Answer 2

Try this: .change() .

fire event in all element change (input , select ,textarea , ..)

  $('form').change(function () { console.log(this); alert('change'); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form id="name" action="/" method="post"> <input type="text" value=" " /> <select> <option value="value">text</option> <option value="value">text</option> </select> </form> 

Answer 3

Add a class to all inputs say 'txt-input' @Html.TextBoxFor(m => m.UnitNo, new { @id="txtUnitNo", @class="txt-input"}) and use class to detect change

$(document).on('change', 'input.txt-input', function() {
  EnableButtons();
});