Switch/HTML Display issue

tbravo

07-21-2012, 01:48 AM

Of course I'm a newbie, but I've looked high and low and have yet to see anything similar to what I am doing.

Being a professional myself, I highly respect your time and therefore do not wish to waste it, but it is the end of my day and I still can't figure it out. I'm sure it's something simple and stupid. Please help.

I am trying to set up either a switch with one case and multiple actions or one button with multiple actions. I have no preference. Currently I'm using the one button multiple actions scenario.

I then need to display those results in an html document. It doesn't have to be pretty now. I can work on that later.

Below is the code I'm working with:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Bill Calculator</title>
</head>
<body>
<h1 style="color: red">Bill Calculator</h1>
<h3> This document should allow a ratepayer to review their old rate and see their new rate as well as the difference between the two.</h3>
<hr />
<form name="form1" action ="#">
HCF: <input type="text" name="text1" value="-" />
<br /><br />
Current Rate: <input type="text" id="currentRate" />

<script type="text/javascript">
//This is done to make the following JavaScript code compatible to XHTML. <![CDATA[
function billcalculator1()
{
hcf = document.form1.text1.value;
var current = null;
switch (hcf)
{
case '1':
current = '13.22';
break;
case '2':
current = '14.52';
break;
default:
alert("Please round your usage to the nearest whole number.");
}
document.getElementById("currentRate").value;
}
//]]>
</script>
<br /><br />
Proposed Rate: <input type="text" id="proposedRate" />

<script type="text/javascript">
//This is done to make the following JavaScript code compatible to XHTML. <![CDATA[
function billcalculator2()
{
hcf = document.form1.text1.value;
var proposed = null;
switch (hcf)
{
case '1':
proposed = '17.54';
break;
case '2':
proposed = '18.36';
break;
default:
alert("Please round your usage to the nearest whole number.");
}
document.getElementById("proposedRate").value;
}
//]]>
</script>

<br /><br />

Difference: <input type="text" id="theDifference" />

<script type="text/javascript">
//This is done to make the following JavaScript code compatible to XHTML. <![CDATA[
function billcalculator3()
{
hcf = document.form1.text1.value;
var difference = null;
switch (hcf)
{
case '1':
difference = '+4.32';
break;
case '2':
difference = '+3.84';
break;
default:
alert("Please round your usage to the nearest whole number.");
}
document.getElementById("theDifference").value;
}
//]]>
</script>

<br /><br />
<input type="button" value="Calculate Your New Bill"
onclick="billcalculator1(); billcalculator2(); billcalculator3()" />
</form>
</body>
</html>

Once I can figure out the basics of this I can continue developing it. I don't even know where to start with what I've done wrong. I've been learning javascript slowly and painfully on my own, as needed.

No, this is not for a class. No, I'm not a student. Once again, I humbly ask for your assistance. Thank you for even reading this, I'm at my wits end.

Old Pedant

07-21-2012, 02:35 AM

I'm sorry. I don't know what you are trying to do.

I even ran the code on my machine, but it does nothing.

Your functions end with lines such as

document.getElementById("proposedRate").value;

But those lines do nothing. Are you trying to *CHANGE* the value in "proposedRate"?

And why are you only handling values of 1 or 2 for HCF? If you only want to handle those two values, then why is that an <input> field instead of a <select> or maybe a pair of radio buttons?

Instead of showing us non-working code, how about explaining what the purpose is?

Old Pedant

07-21-2012, 03:02 AM

I *guessed* you want something along these lines:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Bill Calculator</title>
</head>
<body>
<h1 style="color: red">Bill Calculator</h1>
<h3> This document should allow a ratepayer to review their old rate and see their new rate as well as the

difference between the two.</h3>
<hr />
<form id="form1" action ="#">
HCF: <select name="HCF">
<option value="0">--choose an HCF value--</option>
<option value="1"> HCF 1</option>
<option value="2"> HCF 2</option>
</select>
<br /><br />
Current Rate: <input type="text" name="currentRate" readonly />
<br /><br />
Proposed Rate: <input type="text" name="proposedRate" readonly />
<br /><br />
Difference: <input type="text" name="theDifference" readonly />
<br /><br />
<input type="button" name="calculate" value="Calculate Your New Bill"/>
</form>

<script type="text/javascript">
(
function() {
// table to equate HCF to current/proposed/difference:
var hcfTable = {
"HCF0" : {
"current" : "",
"proposed" : "",
"difference" : "" },
"HCF1" : {
"current" : "13.22",
"proposed" : "17.54",
"difference" : "+4.82" },
"HCF2" : {
"current" : "14.52",
"proposed" : "18.36",
"difference" : "+3.84" }
};

// get a universal reference to the form
var form = document.getElementById("form1");

// attach the calculations to the button:
form.calculate.onclick = function() {
var hcf = form.HCF.value; // what the user picked
// get the appropriate subtable from the master table
var table = hcfTable["HCF"+hcf];
form.currentRate.value = table["current"];
form.proposedRate.value = table["proposed"];
form.theDifference.value = table["difference"];
}
}
)(); // invoke the anonymous function to set it all up
</script>
</body>
</html>

But it's purely a guess.

The code is more complex than is needed for your simple situation, but it shows at least one way you can build up the data in tabular form, to minimize errors.

Note that if you use a <select> as I show there, you could get rid of the button and instead just trigger the action via the onchange of the <select>.

To do that, just change

form.calculate.onclick = function() {

to

form.HCF.onchange = function() {

But I'm still just guessing.

Old Pedant

07-21-2012, 03:10 AM

A more efficient way to create many entries in the HCF table is to create an object constructor, thus:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Bill Calculator</title>
</head>
<body>
<h1 style="color: red">Bill Calculator</h1>
<h3> This document should allow a ratepayer to review their old rate and see their new rate as well as the

difference between the two.</h3>
<hr />
<form id="form1" action ="#">
HCF: <select name="HCF">
<option value="0">--choose an HCF value--</option>
<option value="1"> HCF 1</option>
<option value="2"> HCF 2</option>
</select>
<br /><br />
Current Rate: <input type="text" name="currentRate" readonly />
<br /><br />
Proposed Rate: <input type="text" name="proposedRate" readonly />
<br /><br />
Difference: <input type="text" name="theDifference" readonly />
<br /><br />
<input type="button" name="calculate" value="Calculate Your New Bill"/>
</form>

<script type="text/javascript">
(
function() {

// constuctor to create one HCF entry in the hcfTable:
function cHCF( c, p, d )
{
this.current = c;
this.proposed = p;
this.difference = d;
}
// table to equate HCF to current/proposed/difference:
var hcfTable = {
"HCF0" : new cHCF("","",""),
"HCF1" : new cHCF("13.22","17.54","+4.82"),
"HCF2" : new cHCF("14.52","18.36","+3.84")
}

// get a universal reference to the form
var form = document.getElementById("form1");

// attach the calculations to the button:
form.calculate.onclick = function() {
var hcf = form.HCF.value; // what the user picked
// get the appropriate subtable from the master table
var table = hcfTable["HCF"+hcf];
form.currentRate.value = table["current"];
form.proposedRate.value = table["proposed"];
form.theDifference.value = table["difference"];
}
}
)(); // invoke the anonymous function to set it all up
</script>
</body>
</html>

yuriko99

07-21-2012, 04:50 AM

:thumbsup:Of course I'm a newbie, but I've looked high and low and have yet to see anything similar to what I am doing.

Being a professional myself, I highly respect your time and therefore do not wish to waste it, but it is the end of my day and I still can't figure it out. I'm sure it's something simple and stupid. Please help.:thumbsup::thumbsup:

I am trying to set up either a switch with one case and multiple actions or one button with multiple actions. I have no preference. Currently I'm using the one button multiple actions scenario.

I then need to display those results in an html document. It doesn't have to be pretty now. I can work on that later.

Below is the code I'm working with:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Bill Calculator</title>
</head>
<body>
<h1 style="color: red">Bill Calculator</h1>
<h3> This document should allow a ratepayer to review their old rate and see their new rate as well as the difference between the two.</h3>
<hr />
<form name="form1" action ="#">
HCF: <input type="text" name="text1" value="-" />
<br /><br />
Current Rate: <input type="text" id="currentRate" />

<script type="text/javascript">
//This is done to make the following JavaScript code compatible to XHTML. <![CDATA[
function billcalculator1()
{
hcf = document.form1.text1.value;
var current = null;
switch (hcf)
{
case '1':
current = '13.22';
break;
case '2':
current = '14.52';
break;
default:
alert("Please round your usage to the nearest whole number.");
}
document.getElementById("currentRate").value;
}
//]]>
</script>
<br /><br />
Proposed Rate: <input type="text" id="proposedRate" />

<script type="text/javascript">
//This is done to make the following JavaScript code compatible to XHTML. <![CDATA[
function billcalculator2()
{
hcf = document.form1.text1.value;
var proposed = null;
switch (hcf)
{
case '1':
proposed = '17.54';
break;
case '2':
proposed = '18.36';
break;
default:
alert("Please round your usage to the nearest whole number.");
}
document.getElementById("proposedRate").value;
}
//]]>
</script>

<br /><br />

Difference: <input type="text" id="theDifference" />

<script type="text/javascript">
//This is done to make the following JavaScript code compatible to XHTML. <![CDATA[
function billcalculator3()
{
hcf = document.form1.text1.value;
var difference = null;
switch (hcf)
{
case '1':
difference = '+4.32';
break;
case '2':
difference = '+3.84';
break;
default:
alert("Please round your usage to the nearest whole number.");
}
document.getElementById("theDifference").value;
}
//]]>
</script>

<br /><br />
<input type="button" value="Calculate Your New Bill"
onclick="billcalculator1(); billcalculator2(); billcalculator3()" />
</form>
</body>
</html>

Once I can figure out the basics of this I can continue developing it. I don't even know where to start with what I've done wrong. I've been learning javascript slowly and painfully on my own, as needed.

No, this is not for a class. No, I'm not a student. Once again, I humbly ask for your assistance. Thank you for even reading this, I'm at my wits end.

tbravo

07-21-2012, 10:31 PM

Okay so I have 42 options for them to choose, that's why the input. I wanted to make sure my coding worked with two options to start then I can copy/paste my way to freedom. I need the individual to be able to enter the number of hundreds of cubic feet on their bill and have the corresponding bill estimates pop up. You're right about my coding not doing anything. I only wish it would. Thank you for your time and insight I really appreciate it.

I just put your code into my html document and saw the result. This isn't exactly what I was looking for, but I think it'll work for my purposes and keep the customers out of trouble. I won't need to remind them to keep to whole numbers and not go over 42. My only other option to create this was to use a complicated formula. So this works. If it doesn't satisfy, would you mind if I pm'ed you?

Old Pedant

07-22-2012, 09:23 PM

PM away, but if it is a question that others' could learn from, it's often better to just post in the forum.

How complicated is the formula? Though if indeed there are only 42 possible choices, maybe the way I'm doing it would work just fine.