Question

I need to detect if the value inside a textbox is changed .
If the textbox contents are changed/Modified,I need to show a textBox and force the user to enter some comments about the change.

Here is my EditorTemplate page located at Shared/EditorTemplates/Addresses.cshtml

@Html.EditorFor(model => model.Address)
@Html.ValidationMessageFor(model => model.model.Address))
@Html.EditorFor(model => model.Comments,new{style="Visible:false" })
@Html.ValidationMessageFor(model => model.Comments ,new{style="Visible:false" })

Here is MyPage.cshtml where I call the above EditorTemplate

 @if (!UtilityHelper.IsNullOrEmpty(Model.AddressesRecords))
        {

             @Html.EditorFor(model => model.AddressesRecords)

         }

     <input type="submit" name="ButtonCommand" value="Save" />

When the page gets loaded ,there will be multiple address text boxes. If the User makes any modification to the any of the address TextBox,immediately CommentsTextBox will be made visible againt that particular address TextBox ,and validation is enabled.

So when I click Save button,I need to ensure that the user typed some comments in the CommentsTextBox.
If the user Clicks save button without Changing address text box,the records will just get saved.

During runtime ,I can see the editor id’s are dynamically generated like AddressesRecords_0_Address ,AddressesRecords_1_Address ……

I tried with some Jquery,but this never seems to work as the actual AddressTextBox ids are dynamically generated.

<script type="text/javascript">


    $(document).ready(function(){

       var $el = $('#AddressesRecords_0_Address');
       $el.data('oldVal',  $el.val() );


       $el.change(function(){

            $("#AddressesRecords_0_Comments").show();
       })

    });
</script>

Here how do I attach my Jquery change function against each of my addressTextBox ?

Answer 1

Assuming I have 3 different textboxes named TextBox1, TextBox2, and TextBox3 this code will check for any change in those fields and show the Comments field

$('#TextBox1, #TextBox2, #TextBox3').each(function () {
    $(this).data('oldVal', $(this).val());
    $(this).bind("propertychange keyup input paste", function (event) {
        if ($(this).data('oldVal') != $(this).val()) {
            $(this).data('oldVal', $(this).val());

            $('#Comments').show();
        }
    });
});

You could also assign a class to each of the fields and do it like this

$('.MyClass').each(function () {
    $(this).data('oldVal', $(this).val());
    $(this).bind("propertychange keyup input paste", function (event) {
        if ($(this).data('oldVal') != $(this).val()) {
            $(this).data('oldVal', $(this).val());

            $('#Comments').show();
        }
    });
});