locked
how to enable button only if table row data changes RRS feed

  • Question

  • User-1257308419 posted

    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>

    Monday, October 12, 2020 5:51 PM

All replies

  • User475983607 posted

    One way to solve this is using the jQuery change() handler to detect a change in the input.  Then simply enable the button within the same row as the input.  

    @{
        ViewData["Title"] = "Index";
    }
    
    <h1>Index</h1>
    
    <div>
        <table>
            <thead>
                <tr>
                    <td>Col 1</td>
                    <td>Col 2</td>
                    <td>Col 3</td>
                    <td>Col 4</td>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><input id="[0].Id" type="text" name="[0].Id" value="1" /></td>
                    <td><input id="[0].Name" type="text" name="[0].Name" value="Hello" /></td>
                    <td><input id="[0].Value" type="text" name="[0].Value" value="World" /></td>
                    <td><input id="[0].Submit1" type="submit" value="submit" style="display:none" /></td>
                </tr>
                <tr>
                    <td><input id="[1].Id" type="text" name="[1].Id" value="2" /></td>
                    <td><input id="[1].Name" type="text" name="[1].Name" value="Foo" /></td>
                    <td><input id="[1].Value" type="text" name="[1].Value" value="Bar"/></td>
                    <td><input id="[1].Submit1" type="submit" value="submit" style="display:none"  /></td>
                </tr>
            </tbody>
        </table>
    </div>
    @section scripts {
    <script>
        $('input:text').change(function () {
            $(this).closest('tr').find('input:submit').show();
        });
    </script>
    }

    Monday, October 12, 2020 10:50 PM
  • User1535942433 posted

    Hi Learner94,

    Accroding to your description,I'm guessing that you follow these codes in the article:

    $('form')
        .each(function(){
            $(this).data('serialized', $(this).serialize())
        })
        .on('change input', function(){
            $(this)             
                .find('input:submit, button:submit')
                    .prop('disabled', $(this).serialize() == $(this).data('serialized'))
            ;
         })
        .find('input:submit, button:submit')
            .prop('disabled', true)
    ;

    However,the example have used input and you are DisplayFor. As far as I think,you could add span or div outside DisplayFor.Just like this:

    <span id="name">
    @Html.HiddenFor(modelItem => Model[i].user.ID) @Html.DisplayFor(modelItem => Model[i].user.Name) </span>

    Best regards,

    Yijing Sun

    Tuesday, October 13, 2020 6:14 AM
  • User-1257308419 posted

    this doesn't work i tried sorry for late reply

    Friday, October 23, 2020 4:32 PM
  • User475983607 posted

    this doesn't work i tried sorry for late reply

    What does not work?  The code I and yij sun posted works perfecty.  There must be something wrong with your code which of course we cannot see.

    Friday, October 23, 2020 6:16 PM
  • User-1257308419 posted

    What does not work?

    your solution is for input type while i need for DisplayFor so yours is not a solution for me...and the one proposed by Yij Sun doesn't work either as its not firing any event and button is always enabled

    Saturday, October 24, 2020 5:05 AM
  • User475983607 posted

    your solution is for input type while i need for DisplayFor so yours is not a solution for me...and the one proposed by Yij Sun doesn't work either as its not firing any event and button is always enabled

    Correct, standard inputs are required to detect a change.  Also, your example code is looking for input so I'm a little confused.  DisplayFor is read only.  Clearly a user cannot change a read only field.  I do not understand your design.

    My best guess is the change happens elsewhere in the code and you did not share the relevant source or the actual problem.

    Saturday, October 24, 2020 12:21 PM