I have an @Html.TextBoxFor as below :

@Html.TextBoxFor(u => u.SomeProperty, new { @class = "jtb", @id = "TrajName", placeholder = "Traj Name" })

Now what I want to achieve is I want to know when a new character is added to this textbox at the same time it is entered. I want to change a button state to active at this time. I tried blur and change event. But it is fired only when the focus changes.

$(document).ready(function () {
    $('#TrajName').val("");
    $('#StartLocation').val("-Select Location-");
    $('#EndLocation').val("-Select Location-");

    document.getElementById("BtnAddTraj").disabled = true;

    $("#TrajectoryName").blur(function () {
        if ($('#TrajName').text != "")
            document.getElementById("BtnAddTraj").disabled = false;
        else
            document.getElementById("BtnAddTraj").disabled = true;
    });
});

I have a scenario where user can directly try to click on the button after entering some text(ie cursor still inside textbox and focus is not changed).

So is there any event that gives live trigger when a character is added instead of firing on focus change?

I have an @Html.TextBoxFor as below :

@Html.TextBoxFor(u => u.SomeProperty, new { @class = "jtb", @id = "TrajName", placeholder = "Traj Name" })

Now what I want to achieve is I want to know when a new character is added to this textbox at the same time it is entered. I want to change a button state to active at this time. I tried blur and change event. But it is fired only when the focus changes.

$(document).ready(function () {
    $('#TrajName').val("");
    $('#StartLocation').val("-Select Location-");
    $('#EndLocation').val("-Select Location-");

    document.getElementById("BtnAddTraj").disabled = true;

    $("#TrajectoryName").blur(function () {
        if ($('#TrajName').text != "")
            document.getElementById("BtnAddTraj").disabled = false;
        else
            document.getElementById("BtnAddTraj").disabled = true;
    });
});

I have a scenario where user can directly try to click on the button after entering some text(ie cursor still inside textbox and focus is not changed).

So is there any event that gives live trigger when a character is added instead of firing on focus change?

• javascript
• c#
• jquery
• html
• asp-mvc

• 1 Use .keyup(). – user3559349 Commented Nov 30, 2016 at 8:19
• #TrajName is an input so its if ($('#TrajName').val() != "") – user3559349 Commented Nov 30, 2016 at 8:23
• @StephenMuecke : Thanks. It worked. I have a doubt. Both .val() and .text of the textboxfor will return the same thing right? ie the text value of the textbox – ViVi Commented Nov 30, 2016 at 8:51
• No, text will not return anything – user3559349 Commented Nov 30, 2016 at 8:55

1 Answer 1

You need to bind an event handler to the keyup JavaScript event.

Further more, I remend you to use .prop for set disabled property.

Please try this:

@Html.TextBoxFor(u => u.SomeProperty, new { @class = "jtb", @id = "TrajName", placeholder = "Traj Name" }) 

 $("#TrajectoryName").keyup(function () {
    if ($('#TrajName').val() != "")
        $("#BtnAddTraj").prop('disabled',false);
    else
        $("#BtnAddTraj").prop('disabled',true);
});

Another solution is to trigger the input event to the TrajectoryName textbox. This would fire every time your input changes.

$("#TrajectoryName").on('input',function () {
    if ($('#TrajName').val() != "")
        $("#BtnAddTraj").prop('disabled',false);
    else
        $("#BtnAddTraj").prop('disabled',true);
});