To call a javascript function when edit the input box without waiting tab key press

Question

How can I call the function calculfunc() when I type the value or Select the value into Editorfor box. I tried keyup event method but it works only when I type the value, if select from date calendar or numeric popup, it will not be triggered The function should be called immediately type or select new value without waiting for pressing tabKey to focuschange. Here is my code and searched but couldnot find any suggested code

<tbody>
        <tr>
            @*<td>@Html.TextBoxFor(model => model.FromDate, new { @class = "form-control date-input" })</td>*@
            <td>@Html.EditorFor(model => model.FromDate, new { @id = "fromDate", htmlAttributes = new { @class = "form-control datepicker w-100 empHrs" } })</td>
            <td>@Html.EditorFor(model => model.ToDate, new { @id = "todate", htmlAttributes = new { @class = "form-control datepicker w-100 empHrs" } })</td>
            <td>@Html.EditorFor(model => model.SundayNetHrs, new { htmlAttributes = new { type = "number", @class = "form-control  w-100 empHrs" } })</td>
            <td>@Html.EditorFor(model => model.MondayNetHrs, new { htmlAttributes = new { type = "number", @class = "form-control  w-100 empHrs" } })</td>
            <td>@Html.EditorFor(model => model.TuesdayNetHrs, new { htmlAttributes = new { type = "number", @class = "form-control  w-100 empHrs" } })</td>
            <td>@Html.EditorFor(model => model.WednesdayNetHrs, new { htmlAttributes = new { type = "number", @class = "form-control  w-100 empHrs" } })</td>
            <td>@Html.EditorFor(model => model.ThursdayNetHrs, new { htmlAttributes = new { type = "number", @class = "form-control  w-100 empHrs" } })</td>
            <td>@Html.EditorFor(model => model.FridayNetHrs, new { htmlAttributes = new { type = "number", @class = "form-control  w-100 empHrs" } })</td>
            <td>@Html.EditorFor(model => model.SaturdayNetHrs, new { htmlAttributes = new { type = "number", @class = "form-control  w-100 empHrs" } })</td>
            <td>@Html.EditorFor(model => model.NetHrsPerWeek, new { htmlAttributes = new { type = "number", @class = "form-control  w-100 empHrs" } })</td>
            <td>@Html.EditorFor(model => model.HolidayEnt, new { htmlAttributes = new { @class = "form-control  w-100", @readonly = "readonly" } })</td>
            <td><a href="" title="Delete Rows">Delete</a></td>
        </tr>
    </tbody>
</table>

<script>
  function calculfunc() {
        alert("Value has typed or Selected")
    }

</script>

Whats your expectation here, when should the function called as per your requirement? — Md Farid Uddin Kiron, Sep 02 '21 at 09:12
You can try to use [keyup](https://stackoverflow.com/questions/10270452/jquery-change-not-firing-until-blur). — Yiyi You, Sep 02 '21 at 09:12
Hello I have updated the answer would you kindly have a try, it would meet your requirement accordingly. — Md Farid Uddin Kiron, Sep 13 '21 at 04:42

Md Farid Uddin Kiron · Answer 1 · 2021-09-09T03:17:05.350

You can use on .form-control click function to achive that. Please follow the steps below

Model:

public class CallCalculateFunctionModel
    {
       

        [DataType(DataType.Date, ErrorMessage = "Date only")]
        [DisplayFormat(DataFormatString = "{0:dd-MM-yyyy}", ApplyFormatInEditMode = true)]
        public string FromDate { get; set; }

        [DataType(DataType.Date, ErrorMessage = "Date only")]
        [DisplayFormat(DataFormatString = "{0:dd-MM-yyyy}", ApplyFormatInEditMode = true)]
        public DateTime ToDate { get; set; }

        public decimal SundayNetHrs { get; set; }
        public decimal MondayNetHrs { get; set; }
        public decimal NetHrsPerWeek { get; set; }
    }

Controller:

        [HttpGet]
        public IActionResult CallCalculateFuncation()
        {
            return View();
        }

View:

@model CallCalculateFunctionModel
@{
    ViewData["Title"] = "CallCalculate";
}

<table id="tblEntry" class="table table-striped">
    <thead>
        <tr>
            <th>Date From</th>
            <th>Date To</th>
            <th>SundayNetHrs</th>
            <th>MondayNetHrs</th>
            <th>NetHrsPerWeek</th>
            <th>Action</th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>@Html.EditorFor(model => model.FromDate, new { @id = "Name", htmlAttributes = new { @class = "form-control datepicker w-100" } })</td>
            <td>@Html.EditorFor(model => model.ToDate, new { @id = "Date", htmlAttributes = new { @class = "form-control datepicker w-100" } })</td>
            <td>@Html.EditorFor(model => model.SundayNetHrs, new { @id = "SundayNetHrs", htmlAttributes = new { @class = "form-control  w-100"} })</td>
            <td>@Html.EditorFor(model => model.MondayNetHrs, new { @id = "MondayNetHrs", htmlAttributes = new { @class = "form-control  w-100" } })</td>
            <td>@Html.EditorFor(model => model.NetHrsPerWeek, new { @id = "NetHrsPerWeek", htmlAttributes = new { @class = "form-control  w-100"} })</td>
            <td><button type="button" class="btn btn btn-primary">Delete</button></td>
        </tr>

    </tbody>
</table>

Script:

@section scripts {
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
<script>
    function calculfunc() {
        alert("calculfunc Called");
    }
    $(document).ready(function () {
        $(".form-control").on("click", function () {
            alert("Click Fired");
            var callFunc = calculfunc();
        });
    });
</script>

}

Output:

Note: You can both try with on click or change what I mean is $(".form-control").on("click", function () or $(".form-control").on("change", function () either would meet your requirement. change would called the function only when the value has edited or modified.

Hope it would help you.

To call a javascript function when edit the input box without waiting tab key press

1 Answers1