How to pass Textbox value to Javascript function?

Question

My View code is as below where I am calling a javascript function on key up event. I want to pass the control value to javascript function. I tried using 'this' and @this, but it didn't work.

@Html.TextBoxFor(m => m.LeaveDetailsList[0].LeaveTaken, new {id = "numLeaveTaken1", width = "100", @onkeyup = "checkInp2(this);" })

** Edited ** Javascript code:

function checkInp2(ControlId) {
    var x = document.getElementById(ControlID).value;
    if (isNaN(x)) {
        document.getElementById("btnSave").disabled = true;
        return false;
    }
    else {
        document.getElementById("btnSave").disabled = false;
    }
}

So you don't actually want the id, you want the value of the control. Are you happy with jquery code? — user3559349
– user3559349, Commented May 9, 2015 at 9:32

Mackan · Accepted Answer · 2015-05-12 06:37:39Z

1

I figure your onkeyup event should work (even though inline events is not really top of the best practice list now days), but not with the current function. Try changing it to:

function checkInp2(ControlId) {
   var x = ControlId.value;
   ...
}

You're sending this, referring to the element that triggered the event, to the function so there is no need to use getElementById.

If you instead wanted to get the element explicitly by Id, you could use..

document.getElementById('numLeaveTaken1').value; //pure JavaScript 

$('#numLeaveTaken1').val(); //jQuery

In this case you can skip this all together.

edited May 12, 2015 at 6:37

answered May 9, 2015 at 9:41

Mackan

6,2712 gold badges29 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

RKh Over a year ago

Oh yes, I have to use ControlId.value instead of document.getElementById. Now it is working.

Mackan Over a year ago

@RKh I'm glad! I'll note this here since I didn't mention it in my answer: this is referring to the element that triggered the event. So when you send this, in your example, you're actually sending a reference to the entire textbox. If you're already using jQuery, this code could be a lot neater though :)

score 1 · Accepted Answer · 2015-05-09 10:02:57Z

1

You should avoid polluting your mark-up with behavior and instead use Unobtrusive Javascript. Give the textboxes a class name

@Html.TextBoxFor(m => m.LeaveDetailsList[0].LeaveTaken, new { @class = "leave-taken" })

Then the script

var button = $('#btnSave'); // cache it
$('.leave-taken').keyup(function() {
  if(isNaN($(this).val())) {
    button.prop('disabled', true);
  } else {
    button.prop('disabled', false);
  }
});

or it could be reduced to

$('.leave-taken').keyup(function() {
    button.prop('disabled', !isNaN($(this).val()));
});

Note also the controls with can now be style with css - .leave-taken { width: 100px; }

edited May 9, 2015 at 10:02

answered May 9, 2015 at 9:40

user3559349

1 Comment

RKh Over a year ago

I have to mention CSS classes also. In that case Can we give two classes as: @class = "leave-taken, Yellow" ?

Collectives™ on Stack Overflow

How to pass Textbox value to Javascript function?

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related