Dynamically changing form fields

[dawn]

I need to add a bit of javascript to a form that I have created.

The page in question is HERE (http://www.gavinandpage.com/heart/order.html)

I have a drop down list with 5 options. I also have a type area box.

When an option is chosen, I want the type area to show a price depending on that quantity.

ie: if the quantity is 500, then the price should show as £272

I have quite a few of these dropdown lists which I'm presuming will all need a separate piece of code. Most of them will be based on this example, but others are 16 pages which will obviously be costing more. (If you take a look at the link, this will make a bit more sense!)

I know it sounds simple, but I really don't know where to start. Can anyone help?

[cheesebag]

...left out something important: where's the price per item? Presumably this'll be hardcoded in, or inserted at the server. It's obviously needed for any calculations. Also: how about a running total/subtotal/tax etc.?

If you wanted a validator as well (empty field check) - might as welll ask now. ;)

[dawn]

Thanks for he swift reply Cheesebag.:thumbsup:

I'm not going to need a price per item because they will be ordered in the quantities shown in the dropdown list which is where the javascript comes in. As for the totals, yes I will also need to add up all fields for a total text field (I purposefully ommitted this from the original post as I want to do it a step at a time). The only fields I will be validating are the personal details at the end of the form.

Hope this clears that up.

[cheesebag]

dawn....well..not entirely.

You've named all your fields generically: 'selectName', 'textfieldName'...the problem is, these names become the identifiers used to handle the objects in script, and without knowing what the final HTML will look like - exactly - it's pretty hard to offer an efficient solution.

Here's the first part:

<script type="text/javascript" language="javascript">

var prices = { '500' : 272 , '1000' : 500 , '3000' : 1399 , '5000' : 1849 , '10000' : 3288 }

function getIndex(oElement) {
var el, i = -1, oForm = oElement.form;
while (el = oForm.elements[++i])
if (el == oElement)
return i;
return null;
}

function showPrice(oSelect) {
var oForm = oSelect.form, oText = oForm.elements[getIndex(oSelect) + 1]; //get next (text) field
oText.value = '£' + prices[oSelect.options[oSelect.selectedIndex].value]; //populate
//doTotal(); [not ready for prime time]
}

</script>
........
........
<select name="qty4" size="1" onchange="return showPrice(this)">

The totaling will require more details...

[cheesebag]

Took this as far as i could...how come you didn't mention that you had a price-per-quantity page already? Helps. :)

[dawn]

Thanks very much for that Cheesebag. That's exactly what I needed. I didn't say about the prices because I though someone would probably just explain how to go about it and I would just do it myselft, but you've done all the work for me. I'll take a look through the script and learn from that though.

Thanks again. Your help is much appreciated.

Dawn

[dawn]

Cheesebag,

I have now uploaded the new page but when I tested it in Netscape 4 there is an error on Line 19 and when I choose a quantity it is only changing the very first text field.

Is there a way round this? Sorry to be a pain.:rolleyes:

[cheesebag]

Dawn...

Tested it in NS4, seemed fine. There's nothing beyond JavaScript 1.2 (Navigator) in there to cause problems. Perhaps it was some modification(s) you made when adapting it...btw, Nav 4 sucks :D

Post (url, preferably) your page if it's still a problem. Try typing mocha: into the location field & hitting enter to get a specific error message.

[dawn]

Hi Cheesebag,

I should have mentioned that I am on a Mac :eek: and the problem is OK on PC. This is the error:

JavaScript Error: http://www.healthyheartleaflets.co.uk/test/order.html, line 19:

test for equality (==) mistyped as assignment (=)? Assuming equality test.

while (el = oForm.elements[++i])
....................................^

Do you think the best way is to detect Nescape 4 on Mac and redirect to a page saying that it doesn't work, or is there a better way to get it working?

[glenngv]

try:

while ((el = oForm.elements[++i]))

maybe mac needs that extra parentheses? :confused:

[dawn]

glenngv

No that didn't solve my problem.

Thanks anyway.

[cheesebag]

Well...that is interesting. The only thing that occurs to me is that maybe the JavaScript version involved doesn't allow an assignment as a side effect in a conditional. Try doing it this way....

Replace the getIndex() function with this version:

function getIndex(oElement) {
var el, i = 0, oForm = oElement.form, formlen = oForm.elements.length;
for (i; i < formlen; ++i) {
el = oForm.elements[i];
if (el == oElement)
return i;
}
return null;
}

If it works, please let me know the browser version/OS combo. :)

[dawn]

This worked great.:thumbsup:

Thanks so much for your help with this problem.;)

My operating system is Mac 9.2 and the browser I was having the prblem with is Netscape 4.0.