how to get value in javascript from document.getElementsByClassName('myTxtBox');

Question

The html for the textbox I was to get the value from is created from a .js file -- from javascript. I tried this to get the value that I enter into myTxtBox which is defined by a className:

<input type='text' class='myTxtBox editable' name='myTxtBox' value='' maxlength='200' size='90'/>
....

I try to retrieve the value I enter into myTxtBox as follows:

var txtval = document.getElementsByClassName('myTxtBox');
alert(txtval);
...more stuff where I set a breakpoint

the alert says I have [object htmlcollection]

intellisense does not give me .value -- I only get txtVal.valueOf, but when I break into the code and hover over txtval I get a listing for >Methods, ..., >myTxtBox. When I expand the >myTxtBox list if I scroll to the bottom of that listing I DO see "value" in >myTxtBox list and it DOES equal what I entered on the web page.

How do I retrieve that value? I have tried all sorts of options from the intellisense, but it either gives an error msg or [object htmlcollection] on the alert. How do I retrieve the value I entered? Or -- do I use something different than document.getElementsByClassName('myTxtBox') for my scenario?

Possible duplicate of [What does getElementsByClassName return?](http://stackoverflow.com/questions/10693845/what-does-getelementsbyclassname-return) — devlin carnate, Mar 30 '16 at 23:16

thangngoc89 · Answer 1 · 2016-03-30T23:19:41.870

0

getElementsByClassName returns a HtmlCollection which is array like. Do this like this:

var txtval = document.getElementsByClassName('myTxtBox')[0].value
alert(txtval)

edited Mar 30 '16 at 23:19

answered Mar 30 '16 at 23:15

thangngoc89

1,400
11
14

2

It returns an HtmlCollection which is array like. – epascarello Mar 30 '16 at 23:17
already tried that, and it did not work -- I only get valueOf on the intellisense and the wrong message on the alert. But I know the value is there because I can see it when I step into the code and look at all the listing of txtval. The html is generated by the javascript in this js file that is referenced in an ascx user control on my web app. – Rich P Mar 30 '16 at 23:46
No sure why it didn't work. Can you make a simple jsfiddle/jsbin for this? – thangngoc89 Mar 30 '16 at 23:52
well, now this is working -- I must have had a typo or something var txtval = document.getElementsByClassName('myTxtBox')[0].value alert(txtval) – Rich P Mar 31 '16 at 20:49

score 0 · Answer 2 · answered Mar 30 '16 at 23:17

0

You would need to return the index + value as getElementsByClassName returns a HtmlCollection so there are many elements to it.. try this:

var val = document.getElementsByClassName('myTxtBox')[0].value
alert(val)

answered Mar 30 '16 at 23:17

Josh Stevens

3,943
1
15
22

Already tried var val = document.getElementsByClassName('myTxtBox')[0].value ---- all I get on intellisense is valueOf and when I run the app (asp.net) I get either an error message from the alert or [object htmlcollection] – Rich P Mar 30 '16 at 23:44

score 0 · Answer 3 · answered Mar 31 '16 at 16:20

I discovered that I could add an ID to my input element 'myTxtBox' and use jquery to retrieve the desired value, so I did this -- added an ID to the textbox and use jquery in the alert to do a document.getelementbyID

    //--generate the html section here
"...<input type='text' class='myTxttBox editable datepicker' id='myTxtBox'   name='myTxtBox' value='' size='10'/>..."

function NextButton_Click()
{
    try
    {
        alert($("#PositionStartDateTextBox").val());  <---and this displays the value entered into this textbox
....

The whole deal is I have to evaluate some date textboxes because users can enter values in manually -- I guess the best fix would be for this textbox to not be editable. That would be another question -- how to add a datepicker and not have an editable textbox.

how to get value in javascript from document.getElementsByClassName('myTxtBox');

3 Answers3