Dreamweaver forms - Auto input 1

toshga · Jan 15, 2005

Hello All,

I was wondering if one of you dreamweaver pros could help me out please. I am trying to create an order form for a photographer who wants the following:

1. A list box with all of his painting names
2. A quantity box where someone types how many they want to buy.
3. A list box with three mounting options (on canvas, stretched, framed & stretched) for the paintings.
4. A price box

First, you select the name of the painting you want from the list menu and then type in the quantity you want to buy in the quantity box.
Then when ever you select one of the three mounting options, the price for that painting with the option automatically shows up in the price box.

Any help would be greatly appreciated.

Thanks for your time.
Todd S. Texas

Cheech · Jan 17, 2005

You will have to play around with values etc. but heres a quick version of a page that does what you want

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd">[/URL]
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<script language="javascript">
function sumup(){
if (document.forms.form1.painting.value == "0"){
paintval=0;
}
if (document.forms.form1.painting.value == "painting1"){
paintval=1;
}
if (document.forms.form1.painting.value == "painting2"){
paintval=2;
}
if (document.forms.form1.painting.value == "painting3"){
paintval=3;
}
quantval = document.forms.form1.quantity.value;
mountval = document.forms.form1.mounting.value;
totalval = (paintval*quantval) + (mountval*quantval);
document.forms.form1.total.value = totalval;
}
</script>
</head>

<body>
<form name="form1" method="post" action="">
  <p>
    <select name="painting" id="painting" onChange="return sumup();">
      <option value="0" selected>** Please select **</option>
      <option value="painting1">Painting 1 - &pound;1</option>
      <option value="painting2">Painting 2 - &pound;2</option>
      <option value="painting3">Painting 3 - &pound;3</option>
    </select> 
  Which Painting<br>
  <input name="quantity" type="text" id="quantity" value="0" size="5" onChange="return sumup()">
How many?<br>
<select name="mounting" id="mounting" onChange="return sumup()">
  <option value="0">** Pease Select **</option>
  <option value="2.50">Canvas - £2.50</option>
  <option value="3.99">Stretched - £3.99</option>
  <option value="4.99">Framed &amp; Stretched - £4.99</option>
</select> 
Mounting Options?
</p>
  <p>
    <input name="total" type="text" id="total" value="0" size="8" readonly>
Total Cost (Quantity * (Painting choice + Mounting cost)) </p>
  <p>
    <input type="submit" name="Submit" value="Submit">
</p>
</form>
</body>
</html>

Cheech

[Peace][Pipe]

toshga · Jan 18, 2005

Cheech,

Thank you so much for the help. That worked great! I hope it didn't take up too much of your time. It is really nice knowing that there are people out there who are will to share their knowledge with others. Hopefully as I gain experience I can return the favor. Thanks again, and have a great day.

Todd
Texas

Cheech · Jan 18, 2005

Just 5 minutes with DW. Glad to help

Cheech

[Peace][Pipe]

toshga · Jan 21, 2005

Cheech,

I need a little more help if you dont mind. The photographer informed me that each pictures is priced differently based on the mounting features.

Each picture has 3 different prices based on the mounting option you choose. The first box you just select the name of the picture without a price. Then you select the quantity. Then when you select the mounting option, that determines the price. The price box reflects the quantity x the mounting price. (hope this makes sence)

Example 1: Select Picture: Picture1
Select Quantity: 1
Select Mounting Option: $250.00
$350.00
$450.00
Price: quantity x mounting

Example 2: Select Picture: Picture2
Select Quantity: 1
Select Mounting Option: $550.00
$650.00
$750.00
Price: quantity x mounting

Each picture has 3 different prices based on the mounting option. The price for the picture itself is included in the mounting price. He also wants to be able to order more than one at a time.

Item 1 Select Painting - Qty - Mounting - Price

Item 2 Select Painting - Qty - Mounting - Price

Item 3 Select Painting - Qty - Mounting - Price

If you have the time to look at this, that would be great, if not, I understand.

Thank you again so much for the help.

Todd
Texas

Cheech · Jan 21, 2005

pure sums mate, just change the values in the dropdowns & function to reflect the real costs eg. (using your examples)

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd">[/URL]
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<script language="javascript">
function sumup(){
if (document.forms.form1.painting.value == "0"){
paintval=0;
}
if (document.forms.form1.painting.value == "painting1"){
paintval=100;
}
if (document.forms.form1.painting.value == "painting2"){
paintval=400;
}
if (document.forms.form1.painting.value == "painting3"){
paintval=600;
}
quantval = document.forms.form1.quantity.value;
mountval = document.forms.form1.mounting.value;
totalval = (paintval*quantval) + (mountval*quantval);
document.forms.form1.total.value = totalval;
}
</script>
</head>

<body>
<form name="form1" method="post" action="">
  <p>
    <select name="painting" id="painting" onChange="return sumup();">
      <option value="0" selected>** Please select **</option>
      <option value="painting1">Painting 1 - &pound;100</option>
      <option value="painting2">Painting 2 - &pound;400</option>
      <option value="painting3">Painting 3 - &pound;600</option>
    </select> 
  Which Painting<br>
  <input name="quantity" type="text" id="quantity" value="0" size="5" onChange="return sumup()">
How many?<br>
<select name="mounting" id="mounting" onChange="return sumup()">
  <option value="0">** Pease Select **</option>
  <option value="150">Canvas - £150</option>
  <option value="250">Stretched - £250</option>
  <option value="350">Framed &amp; Stretched - £350</option>
</select> 
Mounting Options?
</p>
  <p>
    <input name="total" type="text" id="total" value="0" size="8" readonly>
Total Cost (Quantity * (Painting choice + Mounting cost)) </p>
  <p>
    <input type="submit" name="Submit" value="Submit">
</p>
</form>
</body>
</html>

What I have done is taken the fact that each mounting option is adding x ammount to the cost of the pictures, they appear to be linked.

If that doesnt work in your situation then its a case of taking the javascript function apart and using the base principal to work out your own calculation. The principal is all there just need to make it fit your requirements.

Cheech

[Peace][Pipe]

toshga · Jan 28, 2005

Thanks again Cheech.

Will this form work ok if I have over 300 different items?

Todd
Texas

lexus · Jan 28, 2005

Cheech..This looks like exactly what I have been looking for! Something simple to put on an artist's site that I maintain.

Thanks!! You are wonderful!

**Quiquid latine dictum sit altum viditur.**

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Dreamweaver forms - Auto input 1

toshga

Technical User

Cheech

Technical User

toshga

Technical User

Cheech

Technical User

toshga

Technical User

Cheech

Technical User

toshga

Technical User

lexus

MIS

Similar threads

Part and Inventory Search

Sponsor