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!

Register Log in
  • Congratulations Chriss Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

jump/dropdown menu input form on current page. 1

Status
Not open for further replies.
dodge20

dodge20

MIS
Joined
Jan 15, 2003
Messages
1,048
Location
US
I posted this in the html forum and was told I would have better luck here.

I am wondering if a jump/dropdown menu can insert a form onto the current page (below the dropdown menu).

For example I have my default page with a dropdown with 8 selection options. Right now each option goes to a specific calculation page. Each calculation page is just a form with different calculations. I don't want to have to format each calculation page if I don't have to. I think an include file would work well, but I am not sure if it is possible to do.

Any suggestions or ideas would be appreciated.

Oh, and the page can be reloaded when the dropdown menu is selected if it is easier that way.


Dodge20
 
Sort by date Sort by votes
Does each calculation page have the same fields and just different methods of calculating? If so, then the method is easier.

Otherwise, you would have to have the contents of each form on the page:

Code: 
<html>
<head>
<title>Forms</title>
<script type="text/javascript">
<!-- hide

var last=null;

function setShown(index)
{
  var obj = document.getElementById("formdiv" + index);
  if (last != null)
  {
    last.style.display="none";
  }
  last = obj;
  obj.style.display = "block";
}

// end hide -->
</script>
<style type="text/css">
<!--

.formdiv {
    display: none;
    }

-->
</style>
</head>
<body>
<a href="javascript:setShown(1)">Form 1</a><br>
<a href="javascript:setShown(2)">Form 2</a><br>
<a href="javascript:setShown(3)">Form 3</a><br>
<div id="formdiv1" class="formdiv">
<form name="form1">
<textarea name="txtarea">Form 1</textarea>
</form>
</div>
<div id="formdiv2" class="formdiv">
<form name="form2">
<input type="radio" name="radio1">Radio 1<br>
<input type="radio" name="radio1">Radio 2<br>
</form>
</div>
<div id="formdiv3" class="formdiv">
<form name="formdiv3">
<input type="checkbox" name="check1">Checkbox 1<br>
<input type="checkbox" name="check2">Checkbox 2<br>
</form>
</div>
</body>
</html>

--Chessbot

"So it goes."
Kurt Vonnegut, Slaughterhouse Five
 
Upvote 0 Downvote
Yes, each form has the same fields and just different methods of calculating.

How do I go about this way, or is this what your code does?

Dodge20
 
Upvote 0 Downvote
Add in your own functions and fields.

Code: 
<html>
<head>
<title>Forms</title>
<script type="text/javascript">
<!--

var method = "calc1";

function setMethod(newfunc)
{
  method = newfunc;
}

function doMethod()
{
  eval(method + "()");
}

function calc1()
{
  // Calculate the first way
}
function calc2()
{
  // Calculate the second way
}
function calc3()
{
  // Calculate the third way
}

// end hide -->
</script>
</head>
<body>
<form name="topform">
<input type="radio" name="method" value="calc1" onclick="setMethod(this.value);">Method 1<br>
<input type="radio" name="method" value="calc2" onclick="setMethod(this.value);">Method 2<br>
<input type="radio" name="method" value="calc3" onclick="setMethod(this.value);">Method 3<br>
</form>
<br><br>
<form name="calcform" onsubmit="doMethod();">
Field 1<br>
<input type="text" name="field1"><br>
Field 2<br>
<input type="text" name="field2"><br>
Field 3<br>
<textarea name="field3"></textarea><br>
</form>
</body>
</html>

--Chessbot

"So it goes."
Kurt Vonnegut, Slaughterhouse Five
 
Upvote 0 Downvote
That kind of looks like what I want. The only thing, is I have several functions on each of my calculation page. I am having trouble getting this to work correctly. Here is the code on 1 of my calculation pages.

Code: 
<html><title>Calculator</title>
<SCRIPT LANGUAGE="JavaScript">
<!--

<!-- Begin
var interval_0 = 0;
var interval_500 = 111;
var interval_1000 = 123;
var interval_1500 = 136;
var interval_2500 = 146;
var interval_5000 = 215;
var interval_10000 = 336;
var max_units = 10000; // quantities in excess of max_units all have the same unit price
var currency = "$"; // currency sign used in 'formatMessage()'
// Edit this function to reflect your discount prices! 
function getDiscountPrice(units) {
// Note: It is important to work your way down from max to min amounts!
if (units > 5000) return 0.0242;
if (units > 2500) return 0.0276;
if (units > 1500) return 0.01;
if (units > 1000) return 0.026;
if (units > 500) return 0.024;

if (units <= 0) return 0;
}
function getNumberOfUnits() {
var units = document.calculator.units.value; 
return (units == "") ? 0 : units;
}
function showResult(result) {
// adjust the following line if result must popup somewhere else
document.calculator.respons.value = result;	
}
function formatMessage0(units, unit_price) {
return currency + formatPrice((units) * unit_price + interval_0);
}
function formatMessage500(units, unit_price) {
return currency + formatPrice((units - 500) * unit_price + interval_500);
}
function formatMessage1000(units, unit_price) {
return currency + formatPrice((units - 1000) * unit_price + interval_1000);
}
function formatMessage1500(units, unit_price) {
return currency + formatPrice((units - 1500) * unit_price + interval_1500);
}
function formatMessage2500(units, unit_price) {
return currency + formatPrice((units - 2500) * unit_price + interval_2500);
}
function formatMessage5000(units, unit_price) {
return currency + formatPrice((units - 5000) * unit_price + interval_5000);
}
function formatMessage10000(units, unit_price) {
return currency + formatPrice((units - 10000) * unit_price + interval_10000);
}
// AltUnits (alternate units): add extra units to reach minimum for next discount price
function getAltUnits(units) {
var discount_price = getDiscountPrice(units);
if (units < max_units)
return units;
}
function findPrice() {
var units = getNumberOfUnits();
var unit_price = getDiscountPrice(units);
var alt_units = getAltUnits(units);
var alt_unit_price = getDiscountPrice(alt_units);
var result;
if (units < 500) result = formatMessage0(0,0);
else if (units == 10000) result = formatMessage10000(0,0);
else if (units == 5000) result = formatMessage5000(0,0);
else if (units == 2500) result = formatMessage2500(0,0);
else if (units == 1500) result = formatMessage1500(0,0);
else if (units == 1000) result = formatMessage1000(0,0);
else if (units == 500) result = formatMessage500(0,0);
else if (units > 10000) result = formatMessage10000(units, unit_price);
else if (units > 5000) result = formatMessage5000(units, unit_price);
else if (units > 2500) result = formatMessage2500(units, unit_price);
else if (units > 1500) result = formatMessage1500(units, unit_price);
else if (units > 1000) result = formatMessage1000(units, unit_price);
else if (units > 500) result = formatMessage500(units, unit_price);
else if ((units * unit_price) < (alt_units * alt_unit_price)) 
result = formatMessage500(units, unit_price); 
else
result = formatMessage500(alt_units, alt_unit_price);
showResult(result);
}
function formatPrice(value) {
var result= Math.floor(value) + ".";
var cents = 100 * (value-Math.floor(value)) + 0.5;
result += Math.floor(cents / 10);
result += Math.floor(cents % 10);
return result;
}
function filterNonNumeric(field) {
var result = new String();
var numbers = "0123456789";
var chars = field.value.split(""); // create array 
for (i = 0; i < chars.length; i++) {
if (numbers.indexOf(chars[i]) != -1) result += chars[i];
}
if (field.value != result) field.value = result;
}
//  End -->
//-->
</script>


<BODY onLoad="findPrice()">
<p>&nbsp;</p>
<table border="1" cellspacing="0" cellpadding="3" width="300">
<tr>
<td>500</td>
<td width=50 align=right>$111</td>
</tr>
<tr>
<td>1000 </td>
<td width=50 align=right> $123</td>
</tr>
<tr>
<td>1500 </td>
<td width=50 align=right>$136</td>
</tr>
<tr>
<td>2500</td>
<td width=50 align=right> $146</td>
</tr>
<tr>
<td>5000</td>
<td width=50 align=right>$215</td>
</tr>
<tr>
<td>10000</td>
<td width=50 align=right> $336</td>
</tr>
</table>
<br>
<form name=calculator>
Units:
<input type=text value="500" name="units" onkeydown="findPrice()" onKeyUp="filterNonNumeric(this); findPrice()" onkeypress="findPrice()" size="4">
<input type=text onfocus="this.blur()" name="respons" style="border:0; font-weight:bold;">
</form>

<p><center>
</center><p>

</body>
</html>

Now each other calculation page is identical, with different numbers applied. Since this has multiple functions I can't get your code to work with this.

I know this code isn't great either, I found a free javascript and changed it to what I needed to do. I know the ideal would to have 1 page calculate based on what is selected, but that is beyond my javascript abilities.

Dodge20
 
Upvote 0 Downvote
Is findPrice the only function that is different for each page?

If so, copy each different version of it into the first page, along with the other functions once. Change the names of the function so they are different (probably findPrice1, findPrice2, etc.). Change the values of the radio buttons to reflect the new names, and reply if there is any problem.

--Chessbot

"So it goes."
Kurt Vonnegut, Slaughterhouse Five
 
Upvote 0 Downvote
Actually what is different on each page is this

Code: 
var interval_0 = 0;
var interval_500 = 111;
var interval_1000 = 123;
var interval_1500 = 136;
var interval_2500 = 146;
var interval_5000 = 215;
var interval_10000 = 336;
var max_units = 10000; // quantities in excess of max_units all have the same unit price
var currency = "$"; // currency sign used in 'formatMessage()'
// Edit this function to reflect your discount prices! 
function getDiscountPrice(units) {
// Note: It is important to work your way down from max to min amounts!
if (units > 5000) return 0.0242;
if (units > 2500) return 0.0276;
if (units > 1500) return 0.01;
if (units > 1000) return 0.026;
if (units > 500) return 0.024;

if (units <= 0) return 0;
}

what is messing me up is the variables. I assume I will have to make all the variables on this page, then adjust the functions to call the specific variable I want. Such as the formatMessage and add a bunch more else if statements? Can you point me in the right direction? You have been a big help so far.

Dodge20
 
Upvote 0 Downvote
I should mention it is just the values of the variables that are different the names are all the same. The same is true for what is returned by the if statements. Just the values are changed, not the intervals.

Dodge20
 
Upvote 0 Downvote
Here you go... Untested, but should work.

Code: 
<html>
<head>
<title>Calculations</title>
<script type="text/javascript">
<!-- hide

/* Edit this to reflect each set of intervals. Page 1 includes
 * function 1, and has intervals found in the first section, etc. */

var intervals = new Array();

/*
Repeat for each page. Each one should have increasing numbers, so the second one would be intervals[1][0], the third, intervals[2][0], etc.
*/

intervals[0] = new Array(); // Do not change
intervals[0][0] = "getDiscountPrice1"; // Name of function
intervals[0][1] = "$"; // Currency
intervals[0][2] = 0; // interval_0
intervals[0][3] = 111; // interval_500
intervals[0][4] = 123; // interval_1000
intervals[0][5] = 136; // interval_1500
intervals[0][6] = 146; // interval_2500
intervals[0][7] = 215; // interval_5000
intervals[0][8] = 336; // interval_10000

// Repeat the above

var index = 0; // Default function is 0

/*
Here, add in all the functions that stay the same (all but getDiscountPrice). In all functions, replace the interval variables with the equivalent in the array: intervals[index][2] is interval_0, intervals[index][5] is interval_1500, etc.
*/

function getDiscountPrice1(units) {
// Note: It is important to work your way down from max to min amounts!
if (units > 5000) return 0.0242;
if (units > 2500) return 0.0276;
if (units > 1500) return 0.01;
if (units > 1000) return 0.026;
if (units > 500) return 0.024;
if (units <= 0) return 0;
}

/*
Include each getDiscountPrice with a name pertaining to the one in the array.
*/

// Do not change this.

function setMethod(i)
{
  index = i;
}

// end hide -->
</script>
</head>
<body>
<form name="topform">
<input type="radio" name="method" onclick="setMethod(0);">Method 1<br>
<input type="radio" name="method" onclick="setMethod(1);">Method 2<br>
<input type="radio" name="method" onclick="setMethod(2);">Method 3<br>
</form>

<!--

Add in all the body stuff here

-->
</body>
</html>

Make sure to look at all the comments and edit accordingly.

--Chessbot

"So it goes."
Kurt Vonnegut, Slaughterhouse Five
 
Upvote 0 Downvote
What do I do with the getDiscountprice in this function. How do I determine which discountprice to pull from?

Code: 
function findPrice() {
var units = getNumberOfUnits();
var unit_price = getDiscountPrice(units);
var alt_units = getAltUnits(units);
var alt_unit_price = getDiscountPrice(alt_units);
var result;
if (units < 500) result = formatMessage0(0,0);
else if (units == 10000) result = formatMessage10000(0,0);
else if (units == 5000) result = formatMessage5000(0,0);
else if (units == 2500) result = formatMessage2500(0,0);
else if (units == 1500) result = formatMessage1500(0,0);
else if (units == 1000) result = formatMessage1000(0,0);
else if (units == 500) result = formatMessage500(0,0);
else if (units > 10000) result = formatMessage10000(units, unit_price);
else if (units > 5000) result = formatMessage5000(units, unit_price);
else if (units > 2500) result = formatMessage2500(units, unit_price);
else if (units > 1500) result = formatMessage1500(units, unit_price);
else if (units > 1000) result = formatMessage1000(units, unit_price);
else if (units > 500) result = formatMessage500(units, unit_price);
else if ((units * unit_price) < (alt_units * alt_unit_price)) 
result = formatMessage500(units, unit_price); 
else
result = formatMessage500(alt_units, alt_unit_price);
showResult(result);
}

Dodge20
 
Upvote 0 Downvote
Sorry, didn't mention that.

Code: 
var unit_price = eval( intervals[index][0] + "(" +  units + ")" );

--Chessbot

"So it goes."
Kurt Vonnegut, Slaughterhouse Five
 
Upvote 0 Downvote
It Works!!! Thank you very much. If I could give you more than 1 star I would.

Dodge20
 
Upvote 0 Downvote
Another quick question, is there a way to have the form reset or recalculate when the user clicks on a different button. Right now when you select radio button 1, then input the units it works fine, but when you go back up and change the button radio button, the price remains.

Dodge20
 
Upvote 0 Downvote
Thanks!

If you want to trim your code down more (cut all of those repeating formatMessages), just reply.

--Chessbot

"So it goes."
Kurt Vonnegut, Slaughterhouse Five
 
Upvote 0 Downvote
Sure if you would like to help me out, I would gladly take the help. Also I don't know if you saw my previous post about the reseting of the form when a new button is selected, but I would like that as well.

Dodge20
 
Upvote 0 Downvote
never mind about the selecting different buttons, I figured it out.

Dodge20
 
Upvote 0 Downvote
Code: 
function formatMessage(units, unit_price,intvl) 
{
  var i = fetchIndex(intvl)
  var input = (units-intvl) * unit_price + (index<8) ?intervals[index][i] : 0;
  var result = intervals[index][1] + formatPrice(input);
  return result;
}

function fetchIndex(int)
{
  result = 8;
  if (units == 10000) result = 7;
  else if (units == 5000) result = 6;
  else if (units == 2500) result = 5;
  else if (units == 1500) result = 4;
  else if (units == 1000) result = 3;
  else if (units == 500) result = 2;
  return result;
}


--Chessbot

"So it goes."
Kurt Vonnegut, Slaughterhouse Five
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

trevil620
  • Locked
  • Question Question
SoThink DHTML Menu Conversion
Replies
0
Views
982
trevil620
trevil620
Kennelbloke
  • Locked
  • Question Question
Can't Get Markers to show on Map
Replies
0
Views
1K
Kennelbloke
Kennelbloke
TheLazyPig
  • Locked
  • Question Question
Dropdown (option) using Anguarjs
Replies
0
Views
824
TheLazyPig
TheLazyPig
rogerte
  • Locked
  • Question Question
Code that works on Windows, Android and Iphone
Replies
0
Views
909
rogerte
rogerte
JScannell
  • Locked
  • Question Question
Javascript issue on iPhone/iMac platforms
Replies
0
Views
945
JScannell
JScannell

Part and Inventory Search

Sponsor

Back
Top