Post newbie help needed in making a script generic

[Matthew Speed]

(JS skill level: slightly above newbie)

I have a web page that displays a list of line items. For
simplicity's sake each like looks like

Product 1234 <Product1234Price><input type=hidden
name="product1234price" value="12.95"><input
type="product1234qty"><input type=text name="product1234ext">

where 1234 is the product number from the database. I've written a
script that runs onBlur from the qty field that multiplies the qty
times the price and displays the result in the ext value field. My
problem is that the 1234 changes depending on what items the user has
selected. As a result, I need to set it up so that the javascript
reads something from the current field so that it knows which price to
read and which extended value field to display the total in. My app
works completely from a database standpoint the way this is set up so
I strongly prefer not to change this part but make the script fit the
way I've implemented this.

My initial guess here is that since the name of the qty field is
always known to be product+itemnumber+qty that when I pass it using
the "this" value inside extendprice(this) the called function can
extract it. I am just not too sure how to do this. Can someone help
me out with what I am trying to accomplish?

TIA

 

[Matthew Speed]

Product 1234 <Product1234Price><input type=hidden
name="product1234price" value="12.95"><input
type="product1234qty"><input type=text name="product1234ext">

This should have said <input type=text name="product1234qty"> but I'm
sure y'all figured that out...

 

[Fred Oz]

(JS skill level: slightly above newbie)

I have a web page that displays a list of line items. For
simplicity's sake each like looks like

Product 1234 <Product1234Price><input type=hidden
name="product1234price" value="12.95"><input
type="product1234qty"><input type=text name="product1234ext">

[snip]

Here is a basic example of how to do what you ask.

<script type="text/javascript">
function doPrice(a) {
var p = a.form.elements[a.name+'price'].value;
var q = a.value;
var s = a.name + 'ext';
document.getElementById(s).innerHTML = p*q;
}
</script>

<form action="">
<label for="product1234price">Product 1234: 12.95 each
<input type="hidden" name="product1234price" value="12.95">
</label>&nbsp;&nbsp;
How many?
<input type="text" name="product1234" onblur="doPrice(this)";>
&nbsp;&nbsp;
<span id="product1234ext">0.00</span>
<input type="reset">
</form>


*BUT YOU MUST DO THE FOLLOWING:*

0. Read the faq regarding numbers, maths and display of a fixed number
of decimal places <URL:http://www.jibbering.com/faq/>
1. Validate user entry to ensure they have entered valid digits only
2. Gracefully handle errors if they haven't
3. Prepare the price before writing it to the page to ensure it
is correctly formatted ($0.00)
4. Advise users what to put into the quantity field and what will
happen when they do
5. Ensure your page works without javascript
6. Check everything again on the server, DO NOT trust that your
client-side code will ensure valid data is sent to the server.

Have fun - Fred.

 

[Matthew Speed]

(JS skill level: slightly above newbie)

I have a web page that displays a list of line items. For
simplicity's sake each like looks like

Product 1234 <Product1234Price><input type=hidden
name="product1234price" value="12.95"><input
type="product1234qty"><input type=text name="product1234ext">

[snip]

Here is a basic example of how to do what you ask.

<script type="text/javascript">
function doPrice(a) {
var p = a.form.elements[a.name+'price'].value;
var q = a.value;
var s = a.name + 'ext';
document.getElementById(s).innerHTML = p*q;
}
</script>

<form action="">
<label for="product1234price">Product 1234: 12.95 each
<input type="hidden" name="product1234price" value="12.95">
</label>&nbsp;&nbsp;
How many?
<input type="text" name="product1234" onblur="doPrice(this)";>
&nbsp;&nbsp;
<span id="product1234ext">0.00</span>
<input type="reset">
</form>


*BUT YOU MUST DO THE FOLLOWING:*

0. Read the faq regarding numbers, maths and display of a fixed number
of decimal places <URL:http://www.jibbering.com/faq/>
1. Validate user entry to ensure they have entered valid digits only
2. Gracefully handle errors if they haven't
3. Prepare the price before writing it to the page to ensure it
is correctly formatted ($0.00)
4. Advise users what to put into the quantity field and what will
happen when they do
5. Ensure your page works without javascript
6. Check everything again on the server, DO NOT trust that your
client-side code will ensure valid data is sent to the server.

Thank you very, very much. It would have been a while before I got
that on my own. BTW...I have already done most of what you said need
to do. I rated myself as "post-newbie" because I had already figured
out and/or researched dollar formatting, padding cents with zeros so
it looks like a dollar amount and verification that values entered are
not only numbers but integers. The page works without the javascript
and in fact does the actual calculations of the values stored in the
database on the server side. This script was desired so that the user
entering the qtys would be able to see in real time what their total
would be as they entered it.

 

[Fred Oz]

Matthew Speed wrote:
[snip]

Thank you very, very much. It would have been a while before I got
that on my own. BTW...I have already done most of what you said need
to do. I rated myself as "post-newbie" because I had already figured
out and/or researched dollar formatting, padding cents with zeros so
it looks like a dollar amount and verification that values entered are
not only numbers but integers. The page works without the javascript
and in fact does the actual calculations of the values stored in the

Great. BTW, I forgot to mention that if you trim "product1234qty" to
"product1234" then you just add the extra text "price" and "ext" to
grab those elements. You'd have to trim "price" off again to build the
names of the other elements anyway - no doubt you already picked that
up. I'd probably get rid of "product" too, maybe just make it "p"
unless you are using it - the more concise you make things (within
reason), the easier it is to maintain.

database on the server side. This script was desired so that the user
entering the qtys would be able to see in real time what their total
would be as they entered it.

Good. The basic rule for general web pages is that the page is
enhanced by JS, not dependent on it. You are probably also presenting
a "You have ordered: " page in HTML to confirm the order that the user
can print out too.

You seem to be on the right track, good luck!

Fred.