How can i get these elements to multiply then add and go into the total

[flowerful]

function process()
{
var book1=document.getElementById('amount_a').value*9;
var book2=document.getElementById('amount_b').value*15.5;
var book3=document.getElementById('amount_c').value*6;
var book4=document.getElementById('amount_d').value*4;
var book5=document.getElementById('amount_e').value*5.95;
var book6=document.getElementById('amount_f').value*12.5;
var book7=document.getElementById('amount_g').value*3;
var book8=document.getElementById('amount_h').value*1.5;

total=book1+book2+book3+book4+book5+book6+book7+book8
}
{document.getElementById("tote").value=total;
total="";
}

//snippet of form
<tr>
<td id="book1">Instant Html</td>
<td id="cost_a">9.00</td>
<td width="40"><input class="txt"type="text" size="20"name="amount_a"id="amount_a"value="0"/></td>
<td id="book2">Beginner's CSS Guide</td>
<td id="cost_b">15.50</td>
<td width="40"><input class="txt" type="text" size="20"name="amount_b"id="amount_b"value="0"/></td>
</tr>

[JKing]

Hello,

Give this a try. I think it just might be what you are looking for.

function process()
{
var book1=document.getElementById('amount_a').value*9;
var book2=document.getElementById('amount_b').value*15.5;
var book3=document.getElementById('amount_c').value*6;
var book4=document.getElementById('amount_d').value*4;
var book5=document.getElementById('amount_e').value*5.95;
var book6=document.getElementById('amount_f').value*12.5;
var book7=document.getElementById('amount_g').value*3;
var book8=document.getElementById('amount_h').value*1.5;
 
var total=book1+book2+book3+book4+book5+book6+book7+book8;

document.getElementById("tote").value=total;
document.getElementById("tote").innerHTML = total;
total="";

}

[flowerful]

Hello,

Give this a try. I think it just might be what you are looking for.

function process()
{
var book1=document.getElementById('amount_a').value*9;
var book2=document.getElementById('amount_b').value*15.5;
var book3=document.getElementById('amount_c').value*6;
var book4=document.getElementById('amount_d').value*4;
var book5=document.getElementById('amount_e').value*5.95;
var book6=document.getElementById('amount_f').value*12.5;
var book7=document.getElementById('amount_g').value*3;
var book8=document.getElementById('amount_h').value*1.5;
 
var total=book1+book2+book3+book4+book5+book6+book7+book8;

document.getElementById("tote").value=total;
document.getElementById("tote").innerHTML = total;
total="";

}

Hi JKing, thank you for your reply.I tried your idea and found it didn't work. I think I may have a problem with the button side of it. May I send you the whole thing?I am at a loss.As per usual it is probably something simple.

[johny10151981]

your all data are in <td>.
so try

document.getElementByID("****").innerHTML*your_value

if it dont work then
save all the data in hidden field as well as in <TD>
give new id to all those hidden field and then use

document.getElementByID("new_id").value*your_value

It must have to work

[acoder]

Use parseFloat() around the values to convert them from strings to floats. Also add spaces in your attributes:

size="20"name="amount_a"id="amount_a"value="0"

should be

size="20" name="amount_a" id="amount_a" value="0"

[flowerful]

Hello again.So far I have got it so that it brings up the total, but only for a moment.So my problem being; the form is just the way I want it.except for total staying up and an alert box detailing the total and credit card used being displayed.
I would not know where to begin with hidden fields or parse Float.I have read about them but I am still new at this in a sense.
I would really appreciate any more help please.:)





[

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="tab.css" rel="stylesheet" type="text/css">
<title>Tables</title>

<script type="text/javascript">
function process_order()
{
var book1=document.getElementById('amount_a').value*9;
var book2=document.getElementById('amount_b').value*15.5;
var book3=document.getElementById('amount_c').value*6;
var book4=document.getElementById('amount_d').value*4;
var book5=document.getElementById('amount_e').value*5.95;
var book6=document.getElementById('amount_f').value*12.5;
var book7=document.getElementById('amount_g').value*3;
var book8=document.getElementById('amount_h').value*1.5;
var total=book1+book2+book3+book4+book5+book6+book7+book8;
if(total==24)
{
alert("Please make a selection");
return false;
}
total="$"+total;
document.getElementById("tote").value=total;
}
</script>

<script> 

function validation(){
valid=true;
if (document.order.number.value=="")
{
alert ("Please enter your card number.");
valid=false;
}
if(document.order.expires.value=="")
{
alert ("Please enter your expiry date.");
valid=false;
}
return valid;
}
</script>
<script>
function thank_you()
{                             
valid=true;
if (document.order.number.value="total")
{
  alert ("Thankyou" &nbsp "Your amount due is" &nbsp document.order.tote.value &nbsp 

"dollars."); 
valid=false;
}
else if (document.order.choice.value="")
{  alert("Your card is" &nbsp document.order.choice.value);
valid=false; 
}
else
{
 alert("You haven't entered the fields.");
valid=false;
}
return valid;
}
</script>
<style type="text/css">
div.c1 {text-align: center}
</style>
</head>
<body>


<form id="order" action="" name="order">

<table align="center" border="1" cellspacing="2" cellpadding="10" width="100%">
<caption><h1>Favourite Books</h1></caption>
<tr>
<th align="center"colspan="6">ORDERS<br><br></th>
</tr>


<tr>
<td width="250">Book</td>
<td width="30"> Price </td>
<td width="40">Quantity</td>
<td width="200">Book</td>
<td width="30">Price</td>
<td width="40">Quantity</td>
</tr>

<tr>
<td id="book1">Instant Html</td>
<td id='cost_a'>9.00</td>
<td width="40"><input class="txt" type="text" size="20" name="amount_a" id="amount_a" value="0"></td>
<td id="book2">Beginner's CSS Guide</td>
<td id="cost_b">15.50</td>
<td width="40"><input class="txt" type="text" size="20" name="amount_b" id="amount_b" value="0"></td>
</tr>

<tr>
<td id="book3">Xml Bible</td>
<td id="cost_c">6.00</td>
<td width="40"><input class="txt" type="text" size="20" name="amount_c" id="amount_c" value="3"></td>
<td id="book4">Hot Dhtml Tips</td>
<td id="cost_d">4.00</td>
<td width="40"><input class="txt" type="text" size="20" name="amount_d"id="amount_d" value="0"></td>
</tr>

<tr>
<td id="book5">Cooking with Javascript</td>
<td id="cost_e">5.95</td>
<td width="40"><input class="txt" type="text" size="20" name="amount_e" id="amount_e" value="0"></td>
<td id="book6">Flash into Flash</td>
<td id="cost_f">12.50</td>
<td width="40"><input class="txt" type="text" size="20" name="amount_f" id="amount_f" value="0"></td>
</tr>

<tr>
<td id="book7">Guide to buying on the<br>web </td>
<td id="cost_g">3.00</td>
<td width="40"><input class=txt type=text size="20" name="amount_g" id="amount_g" value="2"></td>
<td id="book8">Web sites for<br>dummies</td>
<td id="cost_h">1.50</td>
<td width="40"><input class="txt" type="text" size="20" name="amount_h" id="amount_h" value="0"></td>
</tr>
</table>

<br>

<div class="c1"><input class="but1" type="submit" name="cal" id="cal" value="Calculate My Bill" onclick="process_order()"></center><br></div>

<table align="center" border="0" cellspacing="0" cellpadding="5" width="30%">
  
<tr>
    <td>Total</td>
   <td><input class="txt" type="text" name="tote" id="tote" value="24"></td>
</tr>
  
<tr>
    <td>Payment</td>
  <td><select class="txt" id="choice" name="choice">

  <option value="Amex">Amex</option>
  <option value="Diners">Diners</option>
  <option value="Master Card">Master Card</option>
  </select></td>
</tr>

  <tr>
    <td>Card Number</td>
    <td><input class="txt" type="text" name="number" id="number" value="123456789" size="12"></td>
  </tr>

  <tr>
    <td>Expires</td>
    <td><input class="txt" type="text" name="expires" id="expires" value="5/05" size="7"> 
   </td>
  </tr>
</form>
</table>

<br>
<div class="c1"><input class="but2" type="submit" name="sub" id="sub" value="Submit"
 onclick="validation() && thank_you();">

<input class="but3" type="reset" name="re" id="re" value="Clear" onclick="this.form.reset();">
</div>
</body>
</html>

]

[flowerful]

Hello again.So far I have got it so that it brings up the total, but only for a moment.So my problem being; the form is just the way I want it.except for total staying up and an alert box detailing the total and credit card used being displayed.
I would not know where to begin with hidden fields or parse Float.I have read about them but I am still new at this in a sense.
I would really appreciate any more help please.:)





[

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="tab.css" rel="stylesheet" type="text/css">
<title>Tables</title>

<script type="text/javascript">
function process_order()
{
var book1=document.getElementById('amount_a').value*9;
var book2=document.getElementById('amount_b').value*15.5;
var book3=document.getElementById('amount_c').value*6;
var book4=document.getElementById('amount_d').value*4;
var book5=document.getElementById('amount_e').value*5.95;
var book6=document.getElementById('amount_f').value*12.5;
var book7=document.getElementById('amount_g').value*3;
var book8=document.getElementById('amount_h').value*1.5;
var total=book1+book2+book3+book4+book5+book6+book7+book8;
if(total==24)
{
alert("Please make a selection");
return false;
}
total="$"+total;
document.getElementById("tote").value=total;
}
</script>

<script> 

function validation(){
valid=true;
if (document.order.number.value=="")
{
alert ("Please enter your card number.");
valid=false;
}
if(document.order.expires.value=="")
{
alert ("Please enter your expiry date.");
valid=false;
}
return valid;
}
</script>
<script>
function thank_you()
{                             
valid=true;
if (document.order.number.value="total")
{
  alert ("Thankyou" &nbsp "Your amount due is" &nbsp document.order.tote.value &nbsp 

"dollars."); 
valid=false;
}
else if (document.order.choice.value="")
{  alert("Your card is" &nbsp document.order.choice.value);
valid=false; 
}
else
{
 alert("You haven't entered the fields.");
valid=false;
}
return valid;
}
</script>
<style type="text/css">
div.c1 {text-align: center}
</style>
</head>
<body>


<form id="order" action="" name="order">

<table align="center" border="1" cellspacing="2" cellpadding="10" width="100%">
<caption><h1>Favourite Books</h1></caption>
<tr>
<th align="center"colspan="6">ORDERS<br><br></th>
</tr>


<tr>
<td width="250">Book</td>
<td width="30"> Price </td>
<td width="40">Quantity</td>
<td width="200">Book</td>
<td width="30">Price</td>
<td width="40">Quantity</td>
</tr>

<tr>
<td id="book1">Instant Html</td>
<td id='cost_a'>9.00</td>
<td width="40"><input class="txt" type="text" size="20" name="amount_a" id="amount_a" value="0"></td>
<td id="book2">Beginner's CSS Guide</td>
<td id="cost_b">15.50</td>
<td width="40"><input class="txt" type="text" size="20" name="amount_b" id="amount_b" value="0"></td>
</tr>

<tr>
<td id="book3">Xml Bible</td>
<td id="cost_c">6.00</td>
<td width="40"><input class="txt" type="text" size="20" name="amount_c" id="amount_c" value="3"></td>
<td id="book4">Hot Dhtml Tips</td>
<td id="cost_d">4.00</td>
<td width="40"><input class="txt" type="text" size="20" name="amount_d"id="amount_d" value="0"></td>
</tr>

<tr>
<td id="book5">Cooking with Javascript</td>
<td id="cost_e">5.95</td>
<td width="40"><input class="txt" type="text" size="20" name="amount_e" id="amount_e" value="0"></td>
<td id="book6">Flash into Flash</td>
<td id="cost_f">12.50</td>
<td width="40"><input class="txt" type="text" size="20" name="amount_f" id="amount_f" value="0"></td>
</tr>

<tr>
<td id="book7">Guide to buying on the<br>web </td>
<td id="cost_g">3.00</td>
<td width="40"><input class=txt type=text size="20" name="amount_g" id="amount_g" value="2"></td>
<td id="book8">Web sites for<br>dummies</td>
<td id="cost_h">1.50</td>
<td width="40"><input class="txt" type="text" size="20" name="amount_h" id="amount_h" value="0"></td>
</tr>
</table>

<br>

<div class="c1"><input class="but1" type="submit" name="cal" id="cal" value="Calculate My Bill" onclick="process_order()"></center><br></div>

<table align="center" border="0" cellspacing="0" cellpadding="5" width="30%">
  
<tr>
    <td>Total</td>
   <td><input class="txt" type="text" name="tote" id="tote" value="24"></td>
</tr>
  
<tr>
    <td>Payment</td>
  <td><select class="txt" id="choice" name="choice">

  <option value="Amex">Amex</option>
  <option value="Diners">Diners</option>
  <option value="Master Card">Master Card</option>
  </select></td>
</tr>

  <tr>
    <td>Card Number</td>
    <td><input class="txt" type="text" name="number" id="number" value="123456789" size="12"></td>
  </tr>

  <tr>
    <td>Expires</td>
    <td><input class="txt" type="text" name="expires" id="expires" value="5/05" size="7"> 
   </td>
  </tr>
</form>
</table>

<br>
<div class="c1"><input class="but2" type="submit" name="sub" id="sub" value="Submit"
 onclick="validation() && thank_you();">

<input class="but3" type="reset" name="re" id="re" value="Clear" onclick="this.form.reset();">
</div>
</body>
</html>

]

OK I have fixed my own problem. I changed the "calculate my bill" button to 'button' instead of 'submit'.
Fixed all my functions as well.I didn't need to parse float in this script.But intend to learn to do it for the next one.