Getting a textbox inside a table cell


S

Sems

Hi
I have a table that contains two columns. Each column has a textbox in
it. I need to sum up the numbers entered into the textboxes. This has
to be done client side using javascript, the rest of the application
is an asp .net application.

I have a javascript function that loops through the table but I still
can't get at the values in the textboxes. Here is my function...

<script language="jscript" type="text/jscript">
function tableSpin() {

var yourTable = document.all("gdSeries");
var yourTotalControl = document.all("totalDiv")

for (var i = 0; i < yourTable.rows.length - 1; i++) {

if (!isNaN(yourTable.rows.cells[1].innerText) &&
yourTable.rows.cells[1].innerText != "")
{
if (!isNaN(yourTable.rows.cells[1].innerText))
alert(yourTable.rows.cells[1].innerHTML);
}
}
}
</script>

I've got an alert in the last if statement at the moment but what I
really want to do is get the value in the textbox in the cell. How do
I do this?

The alert shows the HTML for an INPUT control in which I can see the
'value' field that contains the value in the textbox. How can I get to
this value?

Thanks
 
Ad

Advertisements

S

Sems

Hi
I have a table that contains two columns. Each column has a textbox in
it. I need to sum up the numbers entered into the textboxes. This has
to be done client side using javascript, the rest of the application
is an asp .net application.

I have a javascript function that loops through the table but I still
can't get at the values in the textboxes. Here is my function...

  <script language="jscript" type="text/jscript">
        function tableSpin() {

            var yourTable = document.all("gdSeries");
            var yourTotalControl = document.all("totalDiv")

            for (var i = 0; i < yourTable.rows.length - 1; i++) {

                if (!isNaN(yourTable.rows.cells[1].innerText) &&
yourTable.rows.cells[1].innerText != "")
                {
                    if (!isNaN(yourTable.rows.cells[1].innerText))
                        alert(yourTable.rows.cells[1].innerHTML);
                }
            }
        }
    </script>

I've got an alert in the last if statement at the moment but what I
really want to do is get the value in the textbox in the cell. How do
I do this?

The alert shows the HTML for an INPUT control in which I can see the
'value' field that contains the value in the textbox. How can I get to
this value?

Thanks


I've managed to simpilfy the loop, this is what I'm working with now
but I still haven't solved the problem...

<script language="jscript" type="text/jscript">
function tableSpin() {

var yourTable = document.all("gdSeries");
var yourTotalControl = document.all("totalDiv")

for (var i = 1; i < yourTable.rows.length; i++)
{
if (!isNaN(yourTable.rows.cells[1].innerText))
alert(yourTable.rows.cells[1].innerHTML);
}
}
</script>
 
S

Sems

Sems said:
I've managed to simpilfy the loop, this is what I'm working with now
but I still haven't solved the problem...
    <script language="jscript" type="text/jscript">
        function tableSpin() {
            var yourTable = document.all("gdSeries");
            var yourTotalControl = document.all("totalDiv")
            for (var i = 1; i < yourTable.rows.length; i++)
            {
                    if (!isNaN(yourTable.rows.cells[1].innerText))
                      alert(yourTable.rows.cells[1].innerHTML);
            }
        }
    </script>


Warning: I'm a Javascript virgin, but I think you need ".value" in place
of ".innerHTML"

If I have a form named "form" and an INPUT TYPE=TEXT called "textbox"
then the thing you are looking for would be document.form.textbox.value


Thanks for your response. I just tried that and now in the alert box
it just says 'undefined'. When I was using innerHTML it was showing...

<INPUT onblur=popPercentageCol(abc,abc)
id=gdSeries_ctl02_tbxAllocValue value=333.33 type=text name=gdSeries
$ctl02$tbxAllocValue>

I would of thought you could just grab the value like that as well but
it doesn't seem to be the case. Any other ideas?
 
T

Thomas 'PointedEars' Lahn

Sems said:
Sems said:
alert(yourTable.rows.cells[1].innerHTML);
}
}
</script>

Warning: I'm a Javascript virgin, but I think you need ".value" in place
of ".innerHTML"

If I have a form named "form" and an INPUT TYPE=TEXT called "textbox"
then the thing you are looking for would be document.form.textbox.value
[...]


Thanks for your response. I just tried that and now in the alert box
it just says 'undefined'. When I was using innerHTML it was showing...


That is the risk attached with listening to self-proclaimed "Javascript
virgin"s.

Much in contrast to HTMLInputElement objects, which represent form controls,
HTMLTableCellElement objects do not have a `value' property, so the
`undefined' you are getting is the correct result.

`innerHTML' was somewhat OK (there are obviously problems with the XHTML
markup that ASP .NET generates, and it is proprietary).
`firstChild.nodeValue' or `textContent' are better; however, the latter
doesn't work in MSHTML [AFAIK], and the former as it is doesn't suffice with
leading whitespace text nodes or element descendant nodes (so you need to
serialize there manually).
<INPUT onblur=popPercentageCol(abc,abc)
id=gdSeries_ctl02_tbxAllocValue value=333.33 type=text name=gdSeries
$ctl02$tbxAllocValue>

I would have recommended the use of <http://validator.w3.org/> to you, but
AFAICS ASP .NET is FUBAR in that regard, so there is not much hope to get it
right there.
I would of thought you could just grab the value like that as well but
it doesn't seem to be the case. Any other ideas?

In addition to what I said above, get rid of the `jscript' and
`document.all' nonsense if you want this to work outside of the Micro$~1
world (although that is unlikely).


PointedEars
 
G

Gabriel Gilini

Hi
I have a table that contains two columns. Each column has a textbox in
it. I need to sum up the numbers entered into the textboxes. This has
to be done client side using javascript, the rest of the application
is an asp .net application.

I have a javascript function that loops through the table but I still
can't get at the values in the textboxes. Here is my function...

  <script language="jscript" type="text/jscript">
Lose the "language" attribute, it's deprecated since last century.
Also, switch text/jscript to text/javascript as suggested by the W3C
[1].
        function tableSpin() {

            var yourTable = document.all("gdSeries");
Does this even work? IIRC `document.all' is a collection of DOM
Elements, not a function. Anyway, unless you are planning to support
IE4, use `getElementById'[2].
            var yourTotalControl = document.all("totalDiv")
It's a good practice to end your statements with a semicolon
            for (var i = 0; i < yourTable.rows.length - 1; i++) {
Cache the `length' property for better performance, I.E.: for(var i =
0, len = foo.length; i < len; ++i)
                if (!isNaN(yourTable.rows.cells[1].innerText) &&

This test is probably useless, as I don't think that you will find the
`NaN' value in a text node.
Also, the `innerText' property isn't present in at least all Firefox's
versions. There are other techniques to reach for some node's text
nodes.[3]
yourTable.rows.cells[1].innerText != "")
                {
                    if (!isNaN(yourTable.rows.cells[1].innerText))
                        alert(yourTable.rows.cells[1].innerHTML);
                }
            }
        }
    </script>

I've got an alert in the last if statement at the moment but what I
really want to do is get the value in the textbox in the cell. How do
I do this?

That depends of your structure. One approach would be to iterate
through the cell node's `childNodes' collection property in order to
find the INPUT element, i.e.:
var cell = yourTable.rows.cells[1];
for(var prop in cell.childNodes){
if(cell.childNodes[prop].nodeName == 'INPUT'){ // assuming HTML
doctype
window.alert(cell.childNodes[prop].value);
}
}

[snip]
HTH
 
G

Gabriel Gilini

I have a table that contains two columns. Each column has a textbox in
it. I need to sum up the numbers entered into the textboxes. This has
to be done client side using javascript, the rest of the application
is an asp .net application.
I have a javascript function that loops through the table but I still
can't get at the values in the textboxes. Here is my function...
  <script language="jscript" type="text/jscript">

Lose the "language" attribute, it's deprecated since last century.
Also, switch text/jscript to text/javascript as suggested by the W3C
[1].
        function tableSpin() {
            var yourTable = document.all("gdSeries");

Does this even work? IIRC `document.all' is a collection of DOM
Elements, not a function. Anyway, unless you are planning to support
IE4, use `getElementById'[2].
            var yourTotalControl = document.all("totalDiv")

It's a good practice to end your statements with a semicolon
            for (var i = 0; i < yourTable.rows.length - 1; i++) {

Cache the `length' property for better performance, I.E.: for(var i =
0, len = foo.length; i < len; ++i)


                if (!isNaN(yourTable.rows.cells[1].innerText) &&


This test is probably useless, as I don't think that you will find the
`NaN' value in a text node.
Also, the `innerText' property isn't present in at least all Firefox's
versions. There are other techniques to reach for some node's text
nodes.[3]
yourTable.rows.cells[1].innerText != "")
                {
                    if (!isNaN(yourTable.rows.cells[1].innerText))
                        alert(yourTable.rows..cells[1].innerHTML);
                }
            }
        }
    </script>

I've got an alert in the last if statement at the moment but what I
really want to do is get the value in the textbox in the cell. How do
I do this?

That depends of your structure. One approach would be to iterate
through the cell node's `childNodes' collection property in order to
find the INPUT element, i.e.:
   var cell = yourTable.rows.cells[1];
   for(var prop in cell.childNodes){
      if(cell.childNodes[prop].nodeName == 'INPUT'){ // assuming HTML
doctype
         window.alert(cell.childNodes[prop].value);
      }
   }

[snip]
Thanks

HTH


Forgot the links, sorry

[1] http://www.w3.org/TR/1999/REC-html401-19991224/interact/scripts.html#h-18.2.2.2
[2] https://developer.mozilla.org/en/DOM/document.getElementById
[3] http://www.quirksmode.org/dom/w3c_html.html#all
 
Ad

Advertisements

T

Thomas 'PointedEars' Lahn

Thomas said:
Thomas said:
Sems wrote:
alert(yourTable.rows.cells[1].innerHTML);
}
}
</script>
Warning: I'm a Javascript virgin, but I think you need ".value" in place
of ".innerHTML"

If I have a form named "form" and an INPUT TYPE=TEXT called "textbox"
then the thing you are looking for would be document.form.textbox.value
[...]

Thanks for your response. I just tried that and now in the alert box
it just says 'undefined'. When I was using innerHTML it was showing...


That is the risk attached with listening to self-proclaimed "Javascript
virgin"s.

Much in contrast to HTMLInputElement objects, which represent form controls,
HTMLTableCellElement objects do not have a `value' property, so the
`undefined' you are getting is the correct result.

`innerHTML' was somewhat OK (there are obviously problems with the XHTML
markup that ASP .NET generates, and it is proprietary).
`firstChild.nodeValue' or `textContent' are better; however, the latter
doesn't work in MSHTML [AFAIK], and the former as it is doesn't suffice with
leading whitespace text nodes or element descendant nodes (so you need to
serialize there manually).


Just in case you are still confused: First you need to access the control,
then you can access its `value' property. As your control has an ID,
document.getElementById(...) helps greatly (but be aware of MSHTML bugs with
`name' attributes).


PointedEars
 
T

Thomas 'PointedEars' Lahn

Gabriel said:
Does this even work? IIRC `document.all' is a collection of DOM
Elements, not a function.

It is a (well-known) peculiarity of the MSHTML DOM that several of its
collections are callable.
Anyway, unless you are planning to support IE4, use `getElementById'[2].

No, they should use `getElementById' unless they are planning to support
only IE/MSHTML (until including version 8 at least, there is no telling how
long support for this feature will be maintained).
Cache the `length' property for better performance, I.E.: for(var i =
0, len = foo.length; i < len; ++i)

Maybe the subtraction was intentionally; your suggestion changes the meaning
of the loop. In any case, the following approach is more efficient and
suffices where iteration order does not matter:

for (var i = foo.length; i--;)
if (!isNaN(yourTable.rows.cells[1].innerText) &&

This test is probably useless, as I don't think that you will find the
`NaN' value in a text node.


!isNaN(x) is `true' if `x' cannot be interpreted as a number. That
includes, but is not limited to x === NaN.

Your signature is borken because of Google Groups.


PointedEars
 
T

Thomas 'PointedEars' Lahn

Thomas said:
if (!isNaN(yourTable.rows.cells[1].innerText) &&

This test is probably useless, as I don't think that you will find the
`NaN' value in a text node.


!isNaN(x) is `true' if `x' cannot be interpreted as a number. That
includes, but is not limited to x === NaN.


Err, either lose the `!' or change into `false' to make it right.


PointedEars
 
G

Gabriel Gilini

It is a (well-known) peculiarity of the MSHTML DOM that several of its
collections are callable.
I see. I'm fairly new to browser scripting, so all I know about old
stuff is what I get to read while studying it.
Anyway, unless you are planning to support IE4, use `getElementById'[2]..

No, they should use `getElementById' unless they are planning to support
only IE/MSHTML (until including version 8 at least, there is no telling how
long support for this feature will be maintained).
That's just another way to look at the fact that IE5+ and every other
major browser since 1998 have `getElementById'.
Maybe the subtraction was intentionally; your suggestion changes the meaning
of the loop.
True, I read his second message before posting, where he lost the
subtraction.
 In any case, the following approach is more efficient and
suffices where iteration order does not matter:

  for (var i = foo.length; i--;) ACK
                if (!isNaN(yourTable.rows.cells[1].innerText) &&

This test is probably useless, as I don't think that you will find the
`NaN' value in a text node.


!isNaN(x) is `true' if `x' cannot be interpreted as a number.  That
includes, but is not limited to x === NaN.

That's true, I forgot that `isNaN' applies `ToNumber' to the argument.
Your signature is borken because of Google Groups.
Sorry about that, care to tell what a proper signature looks like? As
you can see, I'm new to Usenet too.
 
T

Thomas 'PointedEars' Lahn

Gabriel said:
Thomas said:
Gabriel said:
Anyway, unless you are planning to support IE4, use `getElementById'[2]..
No, they should use `getElementById' unless they are planning to support
only IE/MSHTML (until including version 8 at least, there is no telling how
long support for this feature will be maintained).
That's just another way to look at the fact that IE5+ and every other
major browser since 1998 have `getElementById'.

Probably you mean 1999 (CE) as IE/MSHTML 5.0 was released 1999-03 and
(AFAIK) there has been no significant release for other browsers considered
"major" at that time before 2000-11-14 (Netscape 6.0/Gecko).
Sorry about that, care to tell what a proper signature looks like?

It needs to be delimited with "--<SP><CR><LF>" and should not exceed 4 lines
at a maximum of 80 characters per line (72 to 78 are optimal for other text,
but signatures are seldom quoted by comparison). Unfortunately, Google
Groups shares this bug with (earlier versions of) Outlook Express and
removes the trailing space character (<SP>) when posting. This precludes
the possibility for newsreaders to recognize the signature as such (color
it differently or hide it, and trim it automatically when replying).
As you can see, I'm new to Usenet too.

I see, therefore please read <http://jibbering.com/faq/#posting> ff. and
take heed of it when you next reply.


PointedEars
 
Ad

Advertisements

S

Sems

Gabriel said:
Thomas said:
Gabriel Gilini wrote:
Anyway, unless you are planning to support IE4, use `getElementById'[2]..
No, they should use `getElementById' unless they are planning to support
only IE/MSHTML (until including version 8 at least, there is no telling how
long support for this feature will be maintained).
That's just another way to look at the fact that IE5+ and every other
major browser since 1998 have `getElementById'.

Probably you mean 1999 (CE) as IE/MSHTML 5.0 was released 1999-03 and
(AFAIK) there has been no significant release for other browsers considered
"major" at that time before 2000-11-14 (Netscape 6.0/Gecko).
Sorry about that, care to tell what a proper signature looks like?

It needs to be delimited with "--<SP><CR><LF>" and should not exceed 4 lines
at a maximum of 80 characters per line (72 to 78 are optimal for other text,
but signatures are seldom quoted by comparison).  Unfortunately, Google
Groups shares this bug with (earlier versions of) Outlook Express and
removes the trailing space character (<SP>) when posting.  This precludes
the possibility for newsreaders to recognize the signature as such (color
it differently or hide it, and trim it automatically when replying).
As you can see, I'm new to Usenet too.

I see, therefore please read <http://jibbering.com/faq/#posting> ff. and
take heed of it when you next reply.

PointedEars
--
var bugRiddenCrashPronePieceOfJunk = (
    navigator.userAgent.indexOf('MSIE 5') != -1
    && navigator.userAgent.indexOf('Mac') != -1
)  // Plone, register_function.js:16

You guys are great. I have a working version now, thank you everybody!
 
Ad

Advertisements

S

SAM

Le 7/29/09 5:34 PM, Sems a écrit :
Sems said:
I've managed to simpilfy the loop, this is what I'm working with now
but I still haven't solved the problem...
<script language="jscript" type="text/jscript">
function tableSpin() {
var yourTable = document.all("gdSeries");
var yourTotalControl = document.all("totalDiv")
for (var i = 1; i < yourTable.rows.length; i++)
{
if (!isNaN(yourTable.rows.cells[1].innerText))
alert(yourTable.rows.cells[1].innerHTML);
}
}
</script>

Warning: I'm a Javascript virgin, but I think you need ".value" in place
of ".innerHTML"

If I have a form named "form" and an INPUT TYPE=TEXT called "textbox"
then the thing you are looking for would be document.form.textbox.value


Thanks for your response. I just tried that and now in the alert box
it just says 'undefined'. When I was using innerHTML it was showing...

<INPUT onblur=popPercentageCol(abc,abc)
id=gdSeries_ctl02_tbxAllocValue value=333.33 type=text name=gdSeries
$ctl02$tbxAllocValue>

I would of thought you could just grab the value like that as well but
it doesn't seem to be the case. Any other ideas?


alert(document.forms[0]['gdSeries $ctl02$tbxAllocValue'].value);

And, in your HTML, please code :
<input name="gdSeries $ctl02$tbxAllocValue" blah >
--> the name inside(between) quotes !
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Top