PDA

View Full Version : Javascript question



John Hulsman
16-Aug-2005, 04:11 PM
I'm developing a new application and I want to make it as dynamic and
database driven as possible. To make a long story short is I have a dynamic
amount of form elements... sRating1, sRating2, sRating3, etc. and I would
like to add them all up. I started making a while loop to do this, but
could not combine the actual name of the form element with the incrementing
javascript value. Eg. something like this...

<script language="Javascript">
function jhTotal() {
var iTotalCat = <%
=oWebObjectName.call("get_jhGetCatTotal",(iParam1)) %>;
var i = 0;
var nTotal = 0;
while (i < iTotalCat) {
i++;
nTotal = (nTotal + document.myForm.sRating[i].value); // THIS
LINE IS THE PROBLEM
}
window.alert(nTotal);
}
</script>

So, in this while loop I want to go through each time adding
document.myForm.sRating1.value, document.myForm.sRating2.value,
document.myForm.sRating3.value into nTotal respectively. It has to be
possible to create a reference to a form value by using the original form
value and a dynamic variable somehow. You see in the actual form itself,
I'm calling a dataflex procedure that builds a dynamic listing of sRatingX
hidden forms containing the values.

If I put it together like "document.myForm.sRating"+i+"value" I'm convinced
the scripting would look at it as a value rather than an object name.

I know its not exactly a webapp question, but there has been many occasions
where I'd have liked to do this and didn't know how. Please help.

Thanks,
John

Jan-E
16-Aug-2005, 06:12 PM
John Hulsman in web-application-server (Tue, 16 Aug 2005 16:11:01 -0500):

> nTotal = (nTotal + document.myForm.sRating[i].value);

Try something like

nTotal += eval('document.myForm.sRating'+i+'.value');

Jan
--
Low CPU versions of DF2.3b - http://www.monitor.nl/df/df.html

Jan-E
16-Aug-2005, 06:22 PM
Jan Ehrhardt in web-application-server (Wed, 17 Aug 2005 01:12:05 +0200):

>John Hulsman in web-application-server (Tue, 16 Aug 2005 16:11:01 -0500):
>
>> nTotal = (nTotal + document.myForm.sRating[i].value);
>
>Try something like
>
> nTotal += eval('document.myForm.sRating'+i+'.value');

This was untested. Tested:

nTotal += parseFloat(eval('document.myForm.sRating'+i+'.valu e'));

Jan
--
Low CPU versions of DF2.3b - http://www.monitor.nl/df/df.html

Knut Sparhell
16-Aug-2005, 09:18 PM
John Hulsman wrote:

> <script language="Javascript">

You should know that the language attribute was never part of any W3C
HTML recommendation, was explicitly deprecated in HTML 4.0 and is
completely invalid (must not be used) in XHTML 1.1. It's a Netscape
invention that never got into official standards.

Always use the type attribute, type="text/javascript". This is valid
for any version of (X)HTML from 3.2, and required in HTML 4.0 and XHTML.
---------------

To loop through all elements of a form, just use the form.length. I
further recommend to supply the form as a paramter to the function,
making it more usable.

Then, remember that all value properties are strings. If you add
strings they are concatenated. To wxtract their numerical value, use
parseInt or ParseFloat. To allow for other inut elements that the text
type I recommend testing for the type before trying to parse and add.
Firther, yiu cpuld need a test for a valid parse result, in case the
value is NaN (not a number).

<head>
....
<script type="text/javascript">
function jhTotal(theform) {
var nTotal = 0;
for (i=0;i<theform.length-1;i++ ) {
if (theform[i].type=='text')
nTotal = (nTotal+parseFloat(theform[i].value))
}
alert(nTotal)
}
</script>
</head>
<body>
<form id="myform" action="" method="post">
<input id="sRating1" value="12.3" />
<input id="sRating2" value="12.3" />
....
<input id="sRatingN" value="12.3" />
<input type="button" value="calc" onclick="jhTotal(this.form)" />
</form>
....
</body>

--------
If you name your function nTotal, then you may easier transfer the sum
in another script section and assign it to an element value property.


--
Knut Sparhell, Norway

Knut Sparhell
16-Aug-2005, 09:34 PM
Jan Ehrhardt wrote:

> This was untested. Tested:
>
> nTotal += parseFloat(eval('document.myForm.sRating'+i+'.valu e'));

Why the eval function here? This should work without it, I think. One
should be a bit careful with eval. It may be evil (security hazard).

The parseFloat (or parseInt) is what converts the (string) property into
a number, and this missing was the reason the original script could not
work, IMHO.

--
Knut Sparhell, Norway

Knut Sparhell
16-Aug-2005, 09:44 PM
John Hulsman wrote:

> <script language="Javascript">

You should know that the language attribute was never part of any W3C
HTML recommendation, was explicitly deprecated in HTML 4.0 and is
completely invalid (must not be used) in XHTML 1.1. It's a Netscape
invention that never got into official standards.

Always use the type attribute, type="text/javascript". This is valid
for any version of (X)HTML from 3.2, and required in HTML 4.0 and XHTML.
---------------

To loop through all elements of a form, just use the form.length. I
further recommend to supply the form as a parameter to the function,
making it more usable.

Then, remember that all value properties are strings. If you add
strings they are concatenated. To extract their numerical value, use
parseInt or parseFloat. To allow for other input elements than the text
type I recommend testing for the type before trying to parse and add.
Further, you could need a test for a valid parse result, in case the
value is NaN (not a number).

<head>
....
<script type="text/javascript">
function jhTotal(theform) {
var nTotal = 0;
for (i=0;i<theform.length-1;i++ ) {
if (theform[i].type=='text')
nTotal = (nTotal+parseFloat(theform[i].value))
}
alert(nTotal)
}
</script>
</head>
<body>
<form id="myform" action="" method="post">
<input id="sRating1" value="12.3" />
<input id="sRating2" value="12.3" />
....
<input id="sRatingN" value="12.3" />
<input type="button" value="calc" onclick="jhTotal(this.form)" />
</form>
....
</body>

--------
If you call your function nTotal, then you may easier transfer the sum
in another script section and assign it to an element value property.


--
Knut Sparhell, Norway

Knut Sparhell
16-Aug-2005, 09:51 PM
Knut Sparhell wrote:

> for (i=0;i<theform.length-1;i++ ) {

Correction. Should be either:

for (i=0;i<=theform.length-1;i++ ) {

or

for (i=0;i<theform.length;i++ ) {

to catch all elements.

--
Knut Sparhell, Norway

Anders Öhrt
17-Aug-2005, 02:29 AM
> nTotal = (nTotal + document.myForm.sRating[i].value); // THIS

Give your forms id's on the form "RatingX", and then use getElementById,
like this: document.getElementById("Rating" + i).value.

Jan-E
17-Aug-2005, 03:25 AM
Knut Sparhell in web-application-server (Wed, 17 Aug 2005 04:34:16 +0200):

>Jan Ehrhardt wrote:
>
>> This was untested. Tested:
>>
>> nTotal += parseFloat(eval('document.myForm.sRating'+i+'.valu e'));
>
>Why the eval function here? This should work without it, I think. One
>should be a bit careful with eval. It may be evil (security hazard).

There is no risk of 'injection' as the i is totally controlled by the
script.

>The parseFloat (or parseInt) is what converts the (string) property into
>a number, and this missing was the reason the original script could not
>work, IMHO.

Try it. Without the eval it does not work. NaN is the result (in Opera8).
Complete (but rudimentary) HTML document:

<form name=myForm>
<input name=sRating1 value=10>
<input name=sRating2 value=20>
<input name=sRating3 value=30>
</form>
<script language="Javascript">
var i = 0;
var nTotal = 0;
while (i < 3) {
i++;
nTotal += parseFloat('document.myForm.sRating'+i+'.value');
}
window.alert(nTotal);
</script>

With

nTotal += parseFloat(eval('document.myForm.sRating'+i+'.valu e'));

the result is 60.

Jan
--
Low CPU versions of DF2.3b - http://www.monitor.nl/df/df.html

Jan-E
17-Aug-2005, 03:29 AM
Knut Sparhell in web-application-server (Wed, 17 Aug 2005 04:44:31 +0200):

>To loop through all elements of a form, just use the form.length.

John's question was to perform an addition of all the form elements with
names sRatingx. How would you do that?

Jan
--
Low CPU versions of DF2.3b - http://www.monitor.nl/df/df.html

Jan-E
17-Aug-2005, 03:34 AM
Anders Öhrt in web-application-server (Wed, 17 Aug 2005 09:29:02 +0200):

>> nTotal = (nTotal + document.myForm.sRating[i].value); // THIS
>
>Give your forms id's on the form "RatingX", and then use getElementById,
>like this: document.getElementById("Rating" + i).value.

document.getElementById is dependant on the browser's DOM implementation.
IE5+, Opera6+ and all Mozilla's support it, but IE4 and Netscape 4 for
instance do not. And I am not sure about Mac-browsers like iCab. If you
can avoid getElementById, avoid it.

Jan
--
Low CPU versions of DF2.3b - http://www.monitor.nl/df/df.html

Anders Öhrt
17-Aug-2005, 04:28 AM
> document.getElementById is dependant on the browser's DOM implementation.

It's dependent om a modern standard compliant browser and the sooner we can
get everyone to upgrade the better!

// Anders

Jan-E
17-Aug-2005, 06:13 AM
Anders Öhrt in web-application-server (Wed, 17 Aug 2005 11:28:51 +0200):

>> document.getElementById is dependant on the browser's DOM implementation.
>
>It's dependent om a modern standard compliant browser and the sooner we can
>get everyone to upgrade the better!

That is a choice every webdeveloper has to make for him (or her) self. It
does not have to be John's choice. A warning does not harm anybody.

Jan
--
Low CPU versions of DF2.3b - http://www.monitor.nl/df/df.html

John Hulsman
17-Aug-2005, 08:10 AM
Correct Jan. I don't want to total all of the form elements. Just the ones
beginning in sRatings -- eg. sRatings1 sRatings2 sRatings3 etc.

This has been some good stuff so far though. Thanks for all of the help. I
have enough to make it work now.

Thanks,
John

"Jan Ehrhardt" <Jan.Ehrhardt@monitor.nl> wrote in message
news:g7t5g1hemv2k7d3f507ga6l3mav0ep8v65@4ax.com...
> Knut Sparhell in web-application-server (Wed, 17 Aug 2005 04:44:31 +0200):
>
>>To loop through all elements of a form, just use the form.length.
>
> John's question was to perform an addition of all the form elements with
> names sRatingx. How would you do that?
>
> Jan
> --
> Low CPU versions of DF2.3b - http://www.monitor.nl/df/df.html

Knut Sparhell
17-Aug-2005, 07:38 PM
Jan Ehrhardt wrote:

> nTotal += parseFloat(eval('document.myForm.sRating'+i+'.valu e'));
>
> the result is 60.

Ok, I overlooked the quotes and missed the point. Of course you need to
eval the strings.

--
Knut Sparhell, Norway