change text of label on onchange event of @Html.TextboxFor in mvc3

Question

I am working with MVC3 Razor. I want to change the text of label on onchange event of @Html.TextboxFor.

Here is my code for what I am trying:

On View:

@Html.TextBoxFor(x => x.ItnScanCaseCode, new { @onchange = "event();" })

JavaScript:

function event() {
    document.getElementById('lblSelectedProductName').value ="sam";
}

But it's not working.

Answer 1

Use this jquery syntax its work fine.

@Html.TextBoxFor(x => x.ItnScanCaseCode, new { @id="txtid",@onchange = "onchangeevent();" })

function onchangeevent(){
        $('#txtid').val('sam');
    }

Answer 2

This can be accomplished with JavaScript, but I am more comfortable to use jQuery. I like to separate my HTML and JavaScript and rather listen for the on change event after all the controls have loaded into the DOM.

Your HTML markup for the text box could look something like this. I added my own label element for testing purposes.

<input id="ItnScanCaseCode" name="ItnScanCaseCode" type="text" value="" />
<label id="lblSelectedProductName">Test Label Text</label>

And your jQuery script to add the on change event listener:

$(document).ready(function () {
     $('#ItnScanCaseCode').change(function () {
          $('#lblSelectedProductName').text('sam');
     });
});

If you need to add this label text changing to a separate function method then do it like this, but the above way is sufficient for me.

$(document).ready(function () {
     function yourEventMethod() {
          $('#lblSelectedProductName').text('sam');
     };

     $('#ItnScanCaseCode').change(function () {
          yourEventMethod();
     });
});

I hope this helps.