...
PDA

JavaScript vars using form

bern
09-14-2008, 01:48 PM
<html>
<head>
<title>JavaScript</title>
<style type="text/css">
<!--
body {
margin: 30px 0px; padding: 0px;
text-align:center;
font-family: arial, helvetica;
background: url('graphics/patterns1.jpg');
}



.hnav {
font: bold 13px arial;
padding: 6px 0;
margin: 0;
width: 60%;
background-color: #FFF2BF;
text-align: center;
}

.hnav li {
list-style: none;
display: inline;
}

.hnav li a {
padding: 3px 0.5em;
text-decoration: none;
color: black;
background-color: #FFF2BF;
border: 2px solid #FFF2BF;
}

.hnav li a:hover {
color: black;
background-color: #FFE271;
border-style: outset;
}

.hnav li a:active {
border-style: inset;
}

table.main {
border: solid 4px;
border-top-color: #515f58;
border-left-color: #9c6141;
border-bottom-color: #515f58;
border-right-color: #9c6141;
width: 20%;
}

th {
color:#DAA520;
font-size: 110%;
}



a:link {
color:#000000;
text-decoration: none;
}

a:visited {
text-decoration: none;
}

a:active {
text-decoration: none;
}

a:hover {
text-decoration: none;
background-color:#FFE271;
}




-->
</style>

<script type="text/javascript">
<!-- hide from old browsers

function process()
{
var q1, q2, q3, q4, total1, total2, total3, total4;

num1 = parseInt(document.myform.quantity1.value);
num2 = parseInt(document.myform.quantity2.value);
num3 = parseInt(document.myform.quantity3.value);
num4 = parseInt(document.myform.quantity4.value);

if (isNaN(num1) || isNaN(num2) || isNaN(num3) || isNaN(num4))
{
window.alert("One inputted value is not a number - try again?");
}
else
{
total1 = num1 * 239.99;
total2 = num2 * 129.75;
total3 = num3 * 99.95;
total4 = num1 * 350.89;

sum = total1 + total2 + total3 + total4;
weekly earnings = 200 + .09 * sum;

document.myform.n1.value = num1;
document.myform.t1.value = "$" + total1.toFixed(2);
document.myform.n2.value = num2;
document.myform.t2.value = "$" + total2.toFixed(2);
document.myform.n3.value = num3;
document.myform.t3.value = "$" + total3.toFixed(2);
document.myform.n4.value = num4;
document.myform.t4.value = "$" + total4.toFixed(2);
document.myform.sub_total.value = "$" + sum.toFixed(2);
document.myform.wkly_earnings.value = "$" + weekly_earnings.toFixed(2);
}
}
//-->
</script>
</head>
<body>
<div align="center">

<h2>not decided</h2>

<ul class="hnav">
<li><a href="underconst.html">HOME</a></li>
<li><a href="">?</a></li>
<li>?</li>
<li><a href="underconst.html">3</a></li>
<li><a href="underconst.html">4</a></li>

<li><a href="underconst.html">5</a></li>
<li><a href="underconst.html">6</a></li>
<li><a href="underconst.html">7</a></li>
<li><a href="underconst.html">8</a></li>
<li><a href="underconst.html">9</a></li>
</ul>

<br /><br />


<form name="myform">

<table class="main" border="0" cellpadding="10" bgcolor="#f4e09c">

<tr><th>Item#</th><th>Price</th><th>Quantity</th><th>Total</tr>
<tr>
<td text align="center">1</td>
<td>$239.99</td>
<td><input type="text" name="quantity1" size="8" /></td>
<<td><input type="text" name="t1" size="8" /> </td>
</tr>

<tr>
<td text align="center">2</td>
<td>$129.75</td>
<td><input type="text" name="quantity2" size="8" /></td>
<td><input type="text" name="t2" size="8" /> </td>
</tr

<tr>
<td text align="center">3</td>
<td>$99.75</td>
<td><input type="text" name="quantity3" size="8" /></td>
<td><input type="text" name="t3" size="8" /> </td>
</tr

<tr>
<td text align="center">4</td>
<td>$350.89</td>
<td><input type="text" name="quantity4" size="8" /></td>
<td><input type="text" name="t4" size="8" /> </td>
</tr
<tr>
<td colspan="3">Total Amount Sold</td>
<td><input type="text" name="sub_total" size="10" /> </td>
</tr>
<tr>
<td colspan="3">Total Weekly Earnings:</td>
<td><input type="text" name="sub_total" size="10" /> </td>
</table>
<br><input type="button" onclick="process()" value="SUBMIT" /><input type="reset" value="RESET" />






</form>



</div>
</body>
</html>
Philip M
09-14-2008, 01:55 PM
And your question is?

At a glance you have two elements with the same name sub_total.
bern
09-14-2008, 02:09 PM
I can't figure out where I'm wrong with my javascript because it doesnt show up the results. And by the way, it's my first time to join a forum.
Mikebert4
09-15-2008, 11:47 AM
Ok, there are a few problems in this, I'll run through them then post the cleaned Javascript

in this bit of code:


num1 = parseInt(document.myform.quantity1.value);
num2 = parseInt(document.myform.quantity2.value);
num3 = parseInt(document.myform.quantity3.value);
num4 = parseInt(document.myform.quantity4.value);


your document.myform.qua-- isn't valid. Try document.forms.myform, thus:


num1 = parseInt(document.forms.myform.quantity1.value);
num2 = parseInt(document.forms.myform.quantity2.value);
num3 = parseInt(document.forms.myform.quantity3.value);
num4 = parseInt(document.forms.myform.quantity4.value);


(this happens later in the file as well)

Your 'weekly_earnings variable is spelt without an underscore first time you use it - and decimals should be denoted as '0.23' not '.23'

so:

weekly earnings = 200 + .09 * sum;


becomes:


weekly_earnings = 200 + 0.09 * sum;


the assignments at the end here:


document.myform.n1.value = num1;
document.myform.t1.value = "$" + total1.toFixed(2);
document.myform.n2.value = num2;
document.myform.t2.value = "$" + total2.toFixed(2);
document.myform.n3.value = num3;
document.myform.t3.value = "$" + total3.toFixed(2);
document.myform.n4.value = num4;
document.myform.t4.value = "$" + total4.toFixed(2);


What's with the n1/n2/n3/n4 values? These elements don't appear in your form.

so, I'd clean that to:


document.forms.myform.t1.value = "$" + total1.toFixed(2);
document.forms.myform.t2.value = "$" + total2.toFixed(2);
document.forms.myform.t3.value = "$" + total3.toFixed(2);
document.forms.myform.t4.value = "$" + total4.toFixed(2);
weekly_earnings.toFixed(2);


The weekly earnings text-box has the same name as sub-total does:


<td colspan="3">Total Amount Sold</td>
<td><input type="text" name="sub_total" size="10" /> </td>
</tr>
<tr>
<td colspan="3">Total Weekly Earnings:</td>
<td><input type="text" name="sub_total" size="10" /> </td>


in your code, you name this box wkly_earnings.. so:


<td colspan="3">Total Amount Sold</td>
<td><input type="text" name="sub_total" size="10" /> </td>
</tr>
<tr>
<td colspan="3">Total Weekly Earnings:</td>
<td><input type="text" name="wkly_earnings" size="10" /> </td>



Your completed (and working) code, then, looks like this:


<html>
<head>
<title>JavaScript</title>
<style type="text/css">
<!--
body {
margin: 30px 0px; padding: 0px;
text-align:center;
font-family: arial, helvetica;
background: url('graphics/patterns1.jpg');
}



.hnav {
font: bold 13px arial;
padding: 6px 0;
margin: 0;
width: 60%;
background-color: #FFF2BF;
text-align: center;
}

.hnav li {
list-style: none;
display: inline;
}

.hnav li a {
padding: 3px 0.5em;
text-decoration: none;
color: black;
background-color: #FFF2BF;
border: 2px solid #FFF2BF;
}

.hnav li a:hover {
color: black;
background-color: #FFE271;
border-style: outset;
}

.hnav li a:active {
border-style: inset;
}

table.main {
border: solid 4px;
border-top-color: #515f58;
border-left-color: #9c6141;
border-bottom-color: #515f58;
border-right-color: #9c6141;
width: 20%;
}

th {
color:#DAA520;
font-size: 110%;
}



a:link {
color:#000000;
text-decoration: none;
}

a:visited {
text-decoration: none;
}

a:active {
text-decoration: none;
}

a:hover {
text-decoration: none;
background-color:#FFE271;
}




-->
</style>

<script type="text/javascript">
<!-- hide from old browsers

function process()
{
var q1, q2, q3, q4, total1, total2, total3, total4;

num1 = parseInt(document.forms.myform.quantity1.value);
num2 = parseInt(document.forms.myform.quantity2.value);
num3 = parseInt(document.forms.myform.quantity3.value);
num4 = parseInt(document.forms.myform.quantity4.value);

if (isNaN(num1) || isNaN(num2) || isNaN(num3) || isNaN(num4))
{
window.alert("One inputted value is not a number - try again?");
}
else
{
total1 = num1 * 239.99;
total2 = num2 * 129.75;
total3 = num3 * 99.95;
total4 = num1 * 350.89;

sum = total1 + total2 + total3 + total4;
weekly_earnings = 200 + 0.09 * sum;

document.forms.myform.t1.value = "$" + total1.toFixed(2);
document.forms.myform.t2.value = "$" + total2.toFixed(2);
document.forms.myform.t3.value = "$" + total3.toFixed(2);
document.forms.myform.t4.value = "$" + total4.toFixed(2);
document.forms.myform.sub_total.value = "$" + sum.toFixed(2);
document.forms.myform.wkly_earnings.value = "$" + weekly_earnings.toFixed(2);
}
}
//-->
</script>
</head>
<body>
<div align="center">

<h2>not decided</h2>

<ul class="hnav">
<li><a href="underconst.html">HOME</a></li>
<li><a href="">?</a></li>
<li>?</li>
<li><a href="underconst.html">3</a></li>
<li><a href="underconst.html">4</a></li>

<li><a href="underconst.html">5</a></li>
<li><a href="underconst.html">6</a></li>
<li><a href="underconst.html">7</a></li>
<li><a href="underconst.html">8</a></li>
<li><a href="underconst.html">9</a></li>
</ul>

<br /><br />


<form name="myform">

<table class="main" border="0" cellpadding="10" bgcolor="#f4e09c">

<tr><th>Item#</th><th>Price</th><th>Quantity</th><th>Total</tr>
<tr>
<td text align="center">1</td>
<td>$239.99</td>
<td><input type="text" name="quantity1" size="8" /></td>
<<td><input type="text" name="t1" size="8" /> </td>
</tr>

<tr>
<td text align="center">2</td>
<td>$129.75</td>
<td><input type="text" name="quantity2" size="8" /></td>
<td><input type="text" name="t2" size="8" /> </td>
</tr

<tr>
<td text align="center">3</td>
<td>$99.75</td>
<td><input type="text" name="quantity3" size="8" /></td>
<td><input type="text" name="t3" size="8" /> </td>
</tr

<tr>
<td text align="center">4</td>
<td>$350.89</td>
<td><input type="text" name="quantity4" size="8" /></td>
<td><input type="text" name="t4" size="8" /> </td>
</tr
<tr>
<td colspan="3">Total Amount Sold</td>
<td><input type="text" name="sub_total" size="10" /> </td>
</tr>
<tr>
<td colspan="3">Total Weekly Earnings:</td>
<td><input type="text" name="wkly_earnings" size="10" /> </td>
</table>
<br><input type="button" onclick="process()" value="SUBMIT" /><input type="reset" value="RESET" />

</form>

</div>
</body>
</html>

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum