Quantcast
Channel: ASP.NET AJAX + Ajax Control Toolkit (ACT)
Viewing all articles
Browse latest Browse all 5678

how to enable button only if table row data changes

$
0
0

i have this table in which it will get data at the time of page load from controller. 

This table will have three columns whose columns are editable now i need someway to enable update button only if there's some change in these columns and keep the button disabled otherwise.

i got some info from this link

https://stackoverflow.com/questions/16593222/disable-submit-button-unless-original-form-data-has-changed

but the issue is that its for type 'Input' only

here's the table

<div class="table-responsive"><form id="form" action="" method="post"><table id="tblCustomers" class="table table-bordered table-striped table-hover js-basic-example dataTable"><thead><tr><th><b>User Name</b></th><th><b>Package Name</b></th><th><b>Buy Date</b></th><th><b>Password</b></th><th><b>Total Daily Earning</b></th><th><b>Update</b></th></tr></thead><tfoot><tr><th><b>User Name</b></th><th><b>Package Name</b></th><th><b>Buy Date</b></th><th><b>Password</b></th><th><b>Total Daily Earning</b></th><th><b>Update</b></th></tr></tfoot><tbody>
                                                @for (int i = 0; i < Model.Count; i++)
                                                {<tr><td contenteditable="true">


                                                            @Html.HiddenFor(modelItem => Model[i].user.ID)

                                                            @Html.DisplayFor(modelItem => Model[i].user.Name)</td><td contenteditable="false">



                                                            @Html.DisplayFor(modelItem => Model[i].package.PName)</td><td contenteditable="false">



                                                            @Html.DisplayFor(modelItem => Model[i].userPackage.BuyDate)</td><td contenteditable="true">

                                                            @Html.DisplayFor(modelItem => Model[i].user.Password)</td><td contenteditable="true">

                                                            @Html.DisplayFor(modelItem => Model[i].user.TotalDailyEarning)</td><td><button class="btn btn-warning captcha" id="MyB">
                                                                Update<i style="color:forestgreen" id="trm"></i></button></td></tr>
                                                }</tbody></table></form></div>

and here's the javascript for now this script keeps buttons disabled on page load but enables the button of the row which is clicked.

<script>$('form')
            .each(function () {$(this).data('serialized', $(this).serialize())
            })$('#tblCustomers tbody').on('click','tr', function () {
            //.on('change input', function () {$(this).find(':submit, input[type="td"]')
                    .prop('disabled', $(this).serialize() == $(this).data('serialized'));$(this)
                    .find('input:submit, button:submit')
                    .prop('disabled', $(this).serialize() == $(this).data('serialized'))
                    ;
            })
            .find('input:submit, button:submit')
            .prop('disabled', true)
            ;</script>


Viewing all articles
Browse latest Browse all 5678

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>