Calculated fields

I know absolutely nothing about JavaScript but I am told that JavaScrip
is needed to solve my Form problem. I’m trying to figure out how t
take 2 List fields that would have text names but would represen
numeric values and calculate them..

First List field would be like this:

Example 1:

<option>Sponsor One</option> (This would represent a numeric valu
of $40.00)
<option>Sponsor Two</option> (This would represent a numeric valu
of $25.00)
<option>Sponsor Three</option> (This would represent a numeric valu
of $10.00)

Then there would be a second List field as in Example 2

Example 2:

<option>1 Month</option> (This would represent a numeric value o
1)
<option>2 Months</option> (This would represent a numeric value o
2)
<option>3 Months</option> (This would represent a numeric value o
3)

Then I would like to multiply the numeric value of the selected item i
the first List field by the numeric value of the selected item in th
second List field and put the result into a text field called “Price”.

I would like to have the result appear in the Price fiel
automatically, as soon as the two items have been selected, withou
having to click on a button.

How difficult is this?

Thanks
Joh

John

re: Calculated fields

<snip problem description>[color=blue]
> How difficult is this?[/color]

Very easy.

See W3C for the Select form control:
http://www.w3.org/TR/html401/interact/forms.html#h-17.6
(And don't just click on the link.... remember the site www.w3.org!)

That should solve the "display text" and "contains numerical values"
problem.

Also mentioned in above link is that Select form control has the onchange
event:
http://www.w3.org/TR/html401/interac...#adef-onchange

That should be the place to start the calculations.

re: Calculated fields

On Tue, 17 Feb 2004 00:38:15 -0600, John C
<John.C.11rf4p@mail.forum4designers.com> wrote:
[color=blue]
> I know absolutely nothing about JavaScript but I am told that JavaScript
> is needed to solve my Form problem. I�m trying to figure out how to
> take 2 List fields that would have text names but would represent
> numeric values and calculate them..[/color]

[snip]
[color=blue]
> Then I would like to multiply the numeric value of the selected item in
> the first List field by the numeric value of the selected item in the
> second List field and put the result into a text field called �Price�.
>
> I would like to have the result appear in the Price field
> automatically, as soon as the two items have been selected, without
> having to click on a button.[/color]

Though KC Wong gave you a good start, you said you know nothing about
JavaScript, so I think a full solution would be more appropriate. Below is
a sample that should set you on your way.

<script type="text/javascript">
function updatePrice( formRef ) {
var rate = parseFloat( formRef.rate.value );
var time = parseInt( formRef.time.value, 10 );

if( isNaN( rate ) || isNaN( time )) {
formRef.price.value = formRef.price.defaultValue;
} else {
formRef.price.value = '$' + ( rate * time );
}
}
</script>
...
<form ... name="sponsor">
<select name="rate" onchange="updatePrice(this.form)">
<option value="n/a">Choose sponsorship option</option>
<option value="40.0">Sponsor One</option>
<option value="25.0">Sponsor Two</option>
<option value="10.0">Sponsor Three</option>
</select>
<select name="time" onchange="updatePrice(this.form)">
<option value="n/a">Choose sponsorship period</option>
<option value="1">1 Month</option>
<option value="2">2 Months</option>
<option value="3">3 Months</option>
</select>
<input name="price" type="text" value="Please choose values">
</form>

Hope that helps,
Mike

--
Michael Winter
M.Winter@blueyonder.co.invalid (replace ".invalid" with ".uk" to reply)

re: Calculated fields

KC Wong wrote:[color=blue]
> *<snip problem description>[color=green]
> > How difficult is this?[/color]
>
> Very easy.
>
> See W3C for the Select form control:
> http://www.w3.org/TR/html401/interact/forms.html#h-17.6
> (And don't just click on the link.... remember the site www.w3.org!)
>
> That should solve the "display text" and "contains numerical values"
> problem.
>
> Also mentioned in above link is that Select form control has th
> onchange
> event:
> http://tinyurl.com/3aaky
>
> That should be the place to start the calculations.[/color]

John

re: Calculated fields

Thank you very much. I'll check out the site. It may be a good plac
to start learning JavaScript.

Thanks
Joh

John

re: Calculated fields

Michael Winter wrote:[color=blue]
> *On Tue, 17 Feb 2004 00:38:15 -0600, John C
> <John.C.11rf4p@mail.forum4designers.com> wrote:
>[color=green]
> > I know absolutely nothing about JavaScript but I am told tha[/color]
> JavaScript[color=green]
> > is needed to solve my Form problem. I�m trying to figure out ho[/color]
> to[color=green]
> > take 2 List fields that would have text names but would represent
> > numeric values and calculate them..[/color]
>
> [snip]
>[color=green]
> > Then I would like to multiply the numeric value of the selecte[/color]
> item in[color=green]
> > the first List field by the numeric value of the selected item i[/color]
> the[color=green]
> > second List field and put the result into a text field calle[/color]
> �Price�.[color=green]
> >
> > I would like to have the result appear in the Price field
> > automatically, as soon as the two items have been selected[/color]
> without[color=green]
> > having to click on a button.[/color]
>
> Though KC Wong gave you a good start, you said you know nothin
> about
> JavaScript, so I think a full solution would be more appropriate
> Below is
> a sample that should set you on your way.
>
> <script type="text/javascript">
> function updatePrice( formRef ) {
> var rate = parseFloat( formRef.rate.value );
> var time = parseInt( formRef.time.value, 10 );
>
> if( isNaN( rate ) || isNaN( time )) {
> formRef.price.value = formRef.price.defaultValue;
> } else {
> formRef.price.value = '$' + ( rate * time );
> }
> }
> </script>
> ...
> <form ... name="sponsor">
> <select name="rate" onchange="updatePrice(this.form)">
> <option value="n/a">Choose sponsorship option</option>
> <option value="40.0">Sponsor One</option>
> <option value="25.0">Sponsor Two</option>
> <option value="10.0">Sponsor Three</option>
> </select>
> <select name="time" onchange="updatePrice(this.form)">
> <option value="n/a">Choose sponsorship period</option>
> <option value="1">1 Month</option>
> <option value="2">2 Months</option>
> <option value="3">3 Months</option>
> </select>
> <input name="price" type="text" value="Please choose values">
> </form>
>
> Hope that helps,
> Mike
>
> --
> Michael Winter
> M.Winter@blueyonder.co.invalid (replace ".invalid" with ".uk" t
> reply)[/color]

John

re: Calculated fields

Thank you very much for your help. I will try your code and hopefull
will learn from it as well. I really appreciate your help.

Would you be able to recommend either a good book or an online tutoria
that would get me started in learning JavaScript? I see that there ar
a number of books in stores but books are like anything else,... ther
are some really good ones and there are some that are a waste of tim
and money. :)

Thanks again, much appreciated,

Joh

John

re: Calculated fields

Michael Winter wrote:[color=blue]
> *On Tue, 17 Feb 2004 00:38:15 -0600, John C
> <John.C.11rf4p@mail.forum4designers.com> wrote:
>[color=green]
> > I know absolutely nothing about JavaScript but I am told tha[/color]
> JavaScript[color=green]
> > is needed to solve my Form problem. I�m trying to figure out ho[/color]
> to[color=green]
> > take 2 List fields that would have text names but would represent
> > numeric values and calculate them..[/color]
>
> [snip]
>[color=green]
> > Then I would like to multiply the numeric value of the selecte[/color]
> item in[color=green]
> > the first List field by the numeric value of the selected item i[/color]
> the[color=green]
> > second List field and put the result into a text field calle[/color]
> �Price�.[color=green]
> >
> > I would like to have the result appear in the Price field
> > automatically, as soon as the two items have been selected[/color]
> without[color=green]
> > having to click on a button.[/color]
>
> Though KC Wong gave you a good start, you said you know nothin
> about
> JavaScript, so I think a full solution would be more appropriate
> Below is
> a sample that should set you on your way.
>
> <script type="text/javascript">
> function updatePrice( formRef ) {
> var rate = parseFloat( formRef.rate.value );
> var time = parseInt( formRef.time.value, 10 );
>
> if( isNaN( rate ) || isNaN( time )) {
> formRef.price.value = formRef.price.defaultValue;
> } else {
> formRef.price.value = '$' + ( rate * time );
> }
> }
> </script>
> ...
> <form ... name="sponsor">
> <select name="rate" onchange="updatePrice(this.form)">
> <option value="n/a">Choose sponsorship option</option>
> <option value="40.0">Sponsor One</option>
> <option value="25.0">Sponsor Two</option>
> <option value="10.0">Sponsor Three</option>
> </select>
> <select name="time" onchange="updatePrice(this.form)">
> <option value="n/a">Choose sponsorship period</option>
> <option value="1">1 Month</option>
> <option value="2">2 Months</option>
> <option value="3">3 Months</option>
> </select>
> <input name="price" type="text" value="Please choose values">
> </form>
>
> Hope that helps,
> Mike
>
> --
> Michael Winter
> M.Winter@blueyonder.co.invalid (replace ".invalid" with ".uk" t
> reply)[/color]

John

re: Calculated fields

Hi Mike,

I don't want to be a pest but,...

I tried your code but ran into an error. I copied the code as you ha
given it and it seems to run fine but as soon as you select an optio
from either <select> menu it flags an error that says:

A Runtime error has occurred.

Line 7:
Error: 'time.value' is null or not an object.

Any suggestions? The code I entered is as follows;


<html>

<head>
<title>Calculated Fields</title>
<script type="text/Javascript">
function updatePrice( formRef ){
var rate = parseFloat( formRef.rate.value );
var time = parseInt( formRef.time.value,10 );

if(isNaN( rate ) || isNaN( time )){
formRef.price.value = formRef.price.defaultValue;
}else{
formRef.price.value = '$' + ( rate * time );
}
}
</script>
</head>

<body>

<form name="sponsor" method="post">
<select name="rate" onchange="updatePrice(this.form)">
<Option value="n/a">Choose Sponsorship</option>
<Option value="40.0">Site Sponsor</option>
<Option value="25.0">Category Sponsor</option>
<Option value="10.0">Featured Sponsor</option>
<Option value="5.0">Text Link</option>
</select>
<select name="rate" onchange="updatePrice(this.form)">
<Option value="n/a">Choose Ad Period</option>
<Option value="12">12 months</option>
<Option value="11">11 months</option>
<Option value="10">10 months</option>
<Option value="9">9 months</option>
<Option value="8">8 months</option>
<Option value="7">7 months</option>
<Option value="6">6 months</option>
<Option value="5">5 months</option>
<Option value="4">4 months</option>
<Option value="3">3 months</option>
<Option value="2">2 months</option>
<Option value="1">1 months</option>
</select>
<input name="price" type="text" value="Please Choose Values"
</form>

</body>
</html

John

re: Calculated fields

On Tue, 17 Feb 2004 11:55:05 -0600, John C
<John.C.11s9ot@mail.forum4designers.com> wrote:
[color=blue]
> I tried your code but ran into an error. I copied the code as you had
> given it and it seems to run fine but as soon as you select an option
> from either <select> menu it flags an error that says:
>
> A Runtime error has occurred.
>
> Line 7:
> Error: 'time.value' is null or not an object.
>
> Any suggestions? The code I entered is as follows;[/color]

[snip]
[color=blue]
> <form name="sponsor" method="post">
> <select name="rate" onchange="updatePrice(this.form)">
> <Option value="n/a">Choose Sponsorship</option>[/color]
[...][color=blue]
> </select>
> <select name="rate" onchange="updatePrice(this.form)">[/color]

Should be: name="time"
[color=blue]
> <Option value="n/a">Choose Ad Period</option>[/color]
[...][color=blue]
> </select>[/color]

If you notice above, you changed the name of the second select element so
that it is the same as the first. Change it to "time" and there should be
no problems.

On an unrelated subject, you should really look into using a Usenet
service that is not Forum4Designers. Not only did they used to claim that
all material was theirs, when it actually belonged to the public medium
that is Usenet, they still do censor posts (complaints made in this group,
comp.lang.javascript, towards Forum4Designers have been deleted) and
destroy the formatting of posts. The code that I gave to you had actually
been indented to make it more readable, but their system condenses it to a
left-aligned mess. It has also been made clear recently that they do not
follow the posting standards that have been defined for sending messages
to Usenet. All three of your previous replies (1 to KC Wong, 2 to me) have
not been threaded by my newsreader due to badly constructed headers. I
also have three other replies from you that have no content, just a
quoting of the previous posts. This again is due to Forum4Designers' poor
design.

I would advise you to see if your ISP provides access to Usenet, and if
available, I would encourage you to use it. If not, use a better service
like Google Groups.

Mike

--
Michael Winter
M.Winter@blueyonder.co.invalid (replace ".invalid" with ".uk" to reply)

re: Calculated fields

John C wrote:
[color=blue]
> Hi Mike,
>[/color]

<--snip-->
[color=blue]
>
> Any suggestions? The code I entered is as follows;[/color]

Yes.

Suggestion 1: Read the comp.lang.javascript FAQ.
Suggestion 2: Get a decent newsreader.
Suggestion 3: Read the comp.lang.javascript FAQ.
Suggestion 4: Learn to copy/paste properly.
Suggestion 5: Read the comp.lang.javascript FAQ.
Suggestion 6: Forget you ever heard of forum4webdesigners, its junk.
Suggestion 7: Read the comp.lang.javascript FAQ.

How many of my suggestions are you going to follow?

Oh yeah, Read the comp.lang.javascript FAQ.

--
Randy
Chance Favors The Prepared Mind
comp.lang.javascript FAQ - http://jibbering.com/faq/