3

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();
}
3
  • 1
    Add a class to all the elements, eg. check-dirty, then you only need a single selector. You may also want to hook to the keydown and paste events for better coverage. Apr 10, 2015 at 14:45
  • 1
    The preferred method for the User Experience is to have buttons visible but disabled. Apr 10, 2015 at 14:55
  • @Rory McCrossan : This looks like the perfect solution, but my JQuery skills are not at that level yet +1
    – Ben Junior
    Apr 10, 2015 at 16:45

3 Answers 3

7

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>

3
  • The class idea is the best, although I'd use js-monitor-change (classic verb-noun), it's good to decouple css, js and html. Apr 10, 2015 at 15:02
  • Agreed, changed to use a class. And I agree it's good to decouple them, however in the OP's case that might be overkill Apr 10, 2015 at 15:06
  • @Joey Ciechanowicz Although your answer is the best, for some reason neither one of the solutions worked in my case. I will have to go with the answer below, but I will vote it up.
    – Ben Junior
    Apr 10, 2015 at 16:42
3

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>

1

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.