locked
How can I enable submit button, only if any of the column value has been changes in any row RRS feed

  • Question

  • User-1355965324 posted

    I have  the following column against each employees .How can I enable save button through javascript ,  only if the value has been changed either in ExtraTimeHrs or Remark column  in any rows

    public class AttendanceEntryModel
    {
          public int EmployeeID { get; set; }
    }
    
    for (i = 0; i < Model.attendanceLogList.Count; i++)
    {
    <td>@Model.attendanceLogList[i].EmployeeName</td> <td><input asp-for="@Model.attendanceLogList[i].ExtraTimeHrs" /></td> <td class="text"><input asp-for="@Model.attendanceLogList[i].Remark" /></td> } <div class="col-sm-5"> <div class="center-block col-sm-6"> <button type="submit" class="btn btn-primary form-control" id="btnSave" disabled>Save</button> </div> </div>
    <script>

    </script>

    Monday, November 9, 2020 2:02 PM

Answers

  • User711641945 posted

    Hi polachan,

    Here is a working demo like below:

    @for (int i = 0; i < Model.attendanceLogList.Count; i++)
    {
    <td>@Model.attendanceLogList[i].EmployeeName</td>
    <td><input asp-for="@Model.attendanceLogList[i].ExtraTimeHrs" /></td>
    <td class="text"><input asp-for="@Model.attendanceLogList[i].Remark" /></td>
    }
    
    <div class="col-sm-5">
        <div class="center-block  col-sm-6">
            <button type="submit" name="submit" class="btn btn-primary form-control" id="btnSave" disabled>Save</button>
        </div>
    </div>
    @section Scripts
    {
    <script>
        $('input[name^="attendanceLogList"]').change(function () {
            if ($(this).val()) {
                $("button[name='submit']").removeAttr('disabled');
            }
        });
    </script>
    }

    Best Regards,

    Rena

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, November 10, 2020 2:09 AM

All replies

  • User475983607 posted

    Use the standard "change" handler to detect changes to the inputs.  Simply show the submit button when the input changes.

    https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event

    Please share your JavaScript code when asking for assistance.  We cannot find the bugs or provide a code review when you do not share your source code?!

    Monday, November 9, 2020 2:12 PM
  • User711641945 posted

    Hi polachan,

    Here is a working demo like below:

    @for (int i = 0; i < Model.attendanceLogList.Count; i++)
    {
    <td>@Model.attendanceLogList[i].EmployeeName</td>
    <td><input asp-for="@Model.attendanceLogList[i].ExtraTimeHrs" /></td>
    <td class="text"><input asp-for="@Model.attendanceLogList[i].Remark" /></td>
    }
    
    <div class="col-sm-5">
        <div class="center-block  col-sm-6">
            <button type="submit" name="submit" class="btn btn-primary form-control" id="btnSave" disabled>Save</button>
        </div>
    </div>
    @section Scripts
    {
    <script>
        $('input[name^="attendanceLogList"]').change(function () {
            if ($(this).val()) {
                $("button[name='submit']").removeAttr('disabled');
            }
        });
    </script>
    }

    Best Regards,

    Rena

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, November 10, 2020 2:09 AM