Dynamically updating forms

I'm trying to make an order form which updates the current price as the user makes selections.  I have 3 drop down boxes which can each affect the price.  I'd like to have the price change everytime a user changes on of the selections.
I assume I would have to use some kind of JScript or VBScript to accomplish this, but am not sure how to start out.  I'd appreciate any working examples of this or some more information on how I could accomplish it.

Thanks in advance.
VeregonAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

TTomCommented:
JavaScript (or VBScript) should do what you want nicely.

You will need a function in the header of your document which evaluates each of the dropdowns and constructs a price based on the choice.  That function will need to be called in an "onchange" event for each of the dropdown lists.

I have done something like this, so if you post some more details (code for your dropdown lists), I can probably bang this out pretty quickly for you.

I may even have the code running around at home, although I don't think the page I did it for is still around.

Tom
0
mgfranzCommented:
Here is a simple form select list script that will do an update/refresh based on the selection of the first list.  You will have to modify it accordingly;  In your dB called test.mdb there are two fields called Country and Color, the select lists parse the data from the field depending on the SQL string.

Mark

<%
Dim objDC, objRS

Set objDC = Server.CreateObject("ADODB.Connection")
objDC.ConnectionTimeout = 30
objDC.CommandTimeout = 60
objDC.Open "DBQ=" & Server.MapPath("test.mdb") & ";Driver={Microsoft Access Driver (*.mdb)};"
Set objRS = Server.CreateObject("ADODB.Recordset")
%>

<HTML>
<HEAD>

</HEAD>
<BODY BGCOLOR="FFFFFF" TEXT="000000" LINK="0000FF" VLINK="800080">
<%
PSQL = "SELECT * FROM Test99 Order by Country;"
objRS.Open PSQL, objDC, 3, 3
%>

<%
Action = Request("Action")
If Action = "" then Action = "Get"
%>

<% If Action = "Get" then %>

<FORM method="get">
<SELECT NAME="ID" onChange="top.location.href=this.form.ID.options[this.form.ID.selectedIndex].value">
<OPTION> Select a Name&nbsp;</OPTION>
<%
Do While Not objRS.EOF
%>

<OPTION VALUE="?Country=<% =objRS.Fields("Country") %>&Action=View"><% =objRS.Fields("Country") %></OPTION>
<%
objRS.MoveNext
Loop
%>

</SELECT>
</form>
<%
objRS.Close
'Set objRS =  Nothing
objDC.Close
'Set objDC = Nothing
%>

<% ElseIf Action="View" then %>
<%
'Dim objDC, objRS

Set objDC = Server.CreateObject("ADODB.Connection")
objDC.ConnectionTimeout = 30
objDC.CommandTimeout = 60
objDC.Open "DBQ=" & Server.MapPath("test.mdb") & ";Driver={Microsoft Access Driver (*.mdb)};"
Set objRS = Server.CreateObject("ADODB.Recordset")
%>
<%
PSQL = "SELECT Distinct Color FROM Test99 WHERE Country='" & Request("Country") & "'"
objRS.Open PSQL, objDC, 3, 3
%>
<html>
<body>

<%
objRS.Close
Set objRS =  Nothing
objDC.Close
Set objDC = Nothing
%>
0
TTomCommented:
Mark:

Unless I am mistaken, the problem here is not repopulating the dropdowns, but, rather, evaluating the selections and using them to generate a price.

I.e., if you have price options for quantity, size, and style, changing any of them would affect the total cost.

That's the issue I was addressing.

Tom
0
Cloud Class® Course: CompTIA Healthcare IT Tech

This course will help prep you to earn the CompTIA Healthcare IT Technician certification showing that you have the knowledge and skills needed to succeed in installing, managing, and troubleshooting IT systems in medical and clinical settings.

VeregonAuthor Commented:
Sorry I didn't get back to this one right away, got caught up with some other stuff.  Tom is correct in that all I'd like to do is evaluate selections and base a price on them.

I've made my own work around for the problem, but it's not ideal.  I've made a form which has the 3 different options (in my case 'level', 'type', and 'billing'.  level can be 0-2, type can be 0-1, billing can be 0-1).  Each combination of the 3 leads to a certain price.  This form simply sends the data to a cgi perl script that evaluates it and then makes another page showing the final price and asking for the rest of the information needed (ie name,address...).

Mark, I appreciate the effort, but what you have posted is definitely out of my league.  If you'd like, I can ask another question which you can propose an answer and I'll give you the points, but I'd like to leave this one open so that it can hopefully be answered in the way I originally intended.

Tom, if there is any more information you need, let me know.  Thanks in advance.

Ed
0
TTomCommented:
Veregon:

If you have the form with the select boxes created, the easiest thing to do would be to post the code.  Writing a simple JavaScript to do what you want should be no problem.  Will just need some parameters as to how tha combination is evaluated, i.e., is one of the selections a "multiplier" or are they just different values which are added together, etc.

Tom
0
VeregonAuthor Commented:
Here's the code for the form, I took out all the webbot stuff that Frontpage put in.

<form method="POST" action="/cgi-bin/subscribe.cgi">
Level of Service:&nbsp;&nbsp;<select name="Level" size="1" id="fp1">
<option value="0">Level A</option>
<option value="1">Level AA</option>
<option selected value="2">Level AAA</option></select>
Type of Service:&nbsp;&nbsp;<select name="Type" size="1" id="fp2">
<option selected value="0">Realtime</option>
<option value="1">15 Minute Delayed</option>
</select>
Billing Cycle:&nbsp;&nbsp<select name="Billing" size="1" id="fp3">
<option value="0">Monthly</option>
<option selected value="1">Annually</option>
</select>
<input type="submit" value="Submit" name="B1">
</form>

Basically, I use a grid with all possible combinations of the 3 variables, each resulting in a certain price.  What I did in the perl script was use a hash, and then put together the 3 options and used it as the possible keys.  I used Level/Type/Billing to generate the possible combinations. (i.e. 000, 001, 010, 011, 100, 101, 110, 111, etc...)
Each combination would have a price associated with it.

Thanks again.
0
mgfranzCommented:
Right, see this statement;

<SELECT NAME="ID" onChange="top.location.href=this.form.ID.options[this.form.ID.selectedIndex].value">

It uses Javascript to pass a select statment to the form field of the same script in this case based upon the submit call.

Am I off track here?

Mark
0
TTomCommented:
Veregon:

You can do the same thing at the client side with JavaScript.  What I would suggest, however, is the possibility of using an "external" javascript file for the price matrix.  It will keep the code a little cleaner, and, if you happen to want to use the matrix in more than one place, you will be able to include it and still be able to maintain it in one place.

For the select boxes, each of them will pass a value based on the selected index.  You can read that value any time a selection changes, construct your "price string", and read back the value.  You are already in good shape, because the values for your options correspond to the selectedIndex values.

Your price hash would look like:

document.forms[0].Level.selectedIndex + document.forms[0].Type.selectedIndex + document.forms[0].Billing.selectedIndex

Your matrix would be an array:

var prices = new Array()

(I must admit, I am not certain whether JavaScript supports multidimensional arrays, but I DO know that JavaScript array elements can be arrays, e.g.

prices[0] = new Array(3)

etc.)

Check this out:

<htmL>
<head>
<title>Tom's Test Page</title>
<script>
function calc(x) {
var str = "" + document.frm.Level.selectedIndex + document.frm.Type.selectedIndex +

document.frm.Billing.selectedIndex
alert(str)
}
</script>
</head>
<body>
<!-- Remember to save this page with another name -->
<hr>
<form name=frm>
<select name="Level" onchange="calc(this)">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<select name="Type" onchange="calc(this)">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<select name="Billing" onchange="calc(this)">
<option value="0">0</option>
<option value="1">1</option>
</select>
</form>
</body></HTML>

Is it basically what you need to do?

Tom

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
VeregonAuthor Commented:
Thanks a lot Tom, this looks like it should be enough to get me up and running soon.  I'll figure out the Array part myself.  I've been planning to learn some basic javascript, just haven't gotten around to it yet, no time like the present! :)
0
TTomCommented:
Most welcome!

Glad to be of assistance.  Even better to point you in a direction you wanted to go.

Let me know if you need more assistance with this.

Happy Holidays!

Tom
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Development

From novice to tech pro — start learning today.