[Webinar] Streamline your web hosting managementRegister Today

x
?
Solved

Dynamically updating forms

Posted on 1999-12-09
10
Medium Priority
?
202 Views
Last Modified: 2013-12-25
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.
0
Comment
Question by:Veregon
  • 5
  • 3
  • 2
10 Comments
 
LVL 9

Expert Comment

by:TTom
ID: 2270242
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
 
LVL 18

Expert Comment

by:mgfranz
ID: 2270399
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
 
LVL 9

Expert Comment

by:TTom
ID: 2281486
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
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 

Author Comment

by:Veregon
ID: 2281562
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
 
LVL 9

Expert Comment

by:TTom
ID: 2281594
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
 

Author Comment

by:Veregon
ID: 2281634
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
 
LVL 18

Expert Comment

by:mgfranz
ID: 2281866
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
 
LVL 9

Accepted Solution

by:
TTom earned 600 total points
ID: 2283409
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
 

Author Comment

by:Veregon
ID: 2289986
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
 
LVL 9

Expert Comment

by:TTom
ID: 2290260
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

Featured Post

Learn to develop an Android App

Want to increase your earning potential in 2018? Pad your resume with app building experience. Learn how with this hands-on course.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

The first step to building an amazing About page is to figure out what you want the page to say about your company. You then must grab the attention of the reader, boast a bit, tell a story and let others brag about you. With a little bit of thought…
The Super Bowl is just days away. Millions of advertising dollars will be spent in just a few hours to drive people to websites around the globe. Optimizing your site in anticipation of a big event like this (and the traffic surges that follow) will…
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
Suggested Courses
Course of the Month10 days, 3 hours left to enroll

591 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question