I am working on a Calculator PhoneGap Application, but i can't get the button with function attached to them to work. I don't see what it stop it. Also the buttons do work in PC browsers but not on the a phone(Tested: Blackberry, Android). If any know how to fix this please let me know thanks.
<!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">
<head>
<link rel="stylesheet" href="MinDark.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile.structure-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<style>
table {table-layout:fixed}
td {width:25%}
#td1 {width:75%}
#td2 {width:25%}
</style>
<div data-role="page" data-theme="a">
<div data-role="header">
Home
<h5 style="text-transform:uppercase">Basic Calculator</h5>
</div>
<div data-role="content">
<form name="calc">
<table width="100%">
<tr>
<td id="td1"><input type="text" name="cal" id="inbox"></td>
</tr>
<tr>
<td id="td2"><input type="button" value="=" onclick="equal()"></td>
</tr>
</table>
<table width="100%">
<tr>
<td><input type="button" value="7" onclick="calc.cal.value += '7'"></td>
<td><input type="button" value="8" onclick="calc.cal.value += '8'"></td>
<td><input type="button" value="9" onclick="calc.cal.value += '9'"></td>
<td><input type="button" value="+" onclick="calc.cal.value += '+'"></td>
</tr>
<tr>
<td><input type="button" value="4" onclick="calc.cal.value += '4'"></td>
<td><input type="button" value="5" onclick="calc.cal.value += '5'"></td>
<td><input type="button" value="6" onclick="calc.cal.value += '6'"></td>
<td><input type="button" value="-" onclick="calc.cal.value += '-'"></td>
</tr>
<tr>
<td><input type="button" value="1" onclick="calc.cal.value += '1'"></td>
<td><input type="button" value="2" onclick="calc.cal.value += '2'"></td>
<td><input type="button" value="3" onclick="calc.cal.value += '3'"></td>
<td><input type="button" value="x" onclick="calc.cal.value += '*'"></td>
</tr>
<tr>
<td><input type="button" value="0" onclick="calc.cal.value += '0'"></td>
<td><input type="button" value="." onclick="calc.cal.value += '.'"></td>
<td><input type="button" value="C" onclick="del()"></td>
<td><input type="button" value="รท" onclick="calc.cal.value += '/'"></td>
</tr>
</table>
</form>
</div>
</div>
<script language="javascript" type="text/javascript">
function equal(){
calc.cal.value = eval(calc.cal.value);
}
function del(){
calc.cal.value = calc.cal.value.substring(0,-1)
}
</script>
</body>
</html>
Update: I figured out what solves this from, the page needs to be reload after being open from the mainpage(index.html). I just don't know how to do that.
Solved: Add rel="external" to link.
Related
Still a beginner in using jquery, and its about making a calculator, I know this is a big problem because it still has an error in it and there's a lot of code to be done to make it work, so what I need is adding, subtracting, multiplying, and dividing two numbers, and upon pressing the operator the first number that was pressed wouldn't be gone rather it will be gone and be change after pressing for the second number. It would also be a big thanks if y'all could help me my problem. Thanks a lot.
$(document).ready(function() {
var number = "";
$(".numeric").click(function() {
var num = $(this).val();
number = number + "" + num;
$("#container").val(number);
});
$(".clear").click(function() {
$("#container").val("");
number = "";
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Sample Calculator</title>
</head>
<body>
<input type="text" id="container" placeholder="" readOnly="readOnly" />
<br /><br />
<table border="1" cellpadding="3">
<tbody>
<tr>
<td>
<input type="button" class="numeric" value="7" />
</td>
<td>
<input type="button" class="numeric" value="8" />
</td>
<td>
<input type="button" class="numeric" value="9" />
</td>
<td>
<input type="button" class="operation" value="+" />
</td>
</tr>
<tr>
<td>
<input type="button" class="numeric" value="4" />
</td>
<td>
<input type="button" class="numeric" value="5" />
</td>
<td>
<input type="button" class="numeric" value="6" />
</td>
<td>
<input type="button" class="operation" value="-" />
</td>
</tr>
<tr>
<td>
<input type="button" class="numeric" value="1" />
</td>
<td>
<input type="button" class="numeric" value="2" />
</td>
<td>
<input type="button" class="numeric" value="3" />
</td>
<td>
<input type="button" class="operation" value="*" />
</td>
</tr>
<tr>
<td>
<input type="button" class="numeric" value="0" />
</td>
<td>
<input type="button" class="operation" value="=" />
</td>
<td>
<input type="button" class="operation" value="/" />
</td>
<td>
<input type="button" class="clear" value="Clear" />
</td>
</tr>
</tbody>
</table>
</body>
</html>
This is a work in progress (a calculator and some other stuff), but what I'm trying to do at the moment is whenever you type in some number into the results of the calculator, and you press "+" the onclick will call checkValidity which will determine if what you typed in was integer or not integer. It will send an alert saying integer or not an integer. My issue is that the onclick won't do anything. I tried emptying the checkValidity function of everything but alert("test); and it still won't work. Could someone please explain what I'm doing wrong?
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript>">
function checkValidity()
{
var Calculator = document.getElementById("Calculator")
if (Calculator.Result.value === parseInt(test, 10))
{
alert("Integer!");
}
else
{
alert("Not an integer, press C");
}
}
</script>
<form name="Calculator">
First name:
<br>
<input type="text" name="firstname">
<br>
Last name:
<br>
<input type="text" name="lastname">
<br>
Student ID:
<br>
<input type="text" name="ID">
<br>
Biography:
<br>
<textarea maxlength=30 rows="2" cols="30">
</textarea>
<br>
Result:
<table border="1" style="width:100%">
<input type="text" name="Result" size="12">
<tr>
<td><Input type="button" Name="zero" Value="0" OnClick="Calculator.Result.value += '0'"> </td>
<td><Input type="button" Name="one" Value="1" OnClick="Calculator.Result.value += '1'"></td>
<td><Input type="button" Name="two" Value="2" OnClick="Calculator.Result.value += '2'"></td>
<td><Input type="button" Name="three" Value="3" OnClick="Calculator.Result.value += '3'"></td>
</tr>
<tr>
<td><Input type="button" Name="four" Value="4" OnClick="Calculator.Result.value += '4'"></td>
<td><Input type="button" Name="five" Value="5" OnClick="Calculator.Result.value += '5'"></td>
<td><Input type="button" Name="six" Value="6" OnClick="Calculator.Result.value += '6'"></td>
<td><Input type="button" Name="seven" Value="7" OnClick="Calculator.Result.value += '7'"></td>
</tr>
<tr>
<td><Input type="button" Name="eight" Value="8" OnClick="Calculator.Result.value += '8'"></td>
<td><Input type="button" Name="nine" Value="9" OnClick="Calculator.Result.value += '9'"></td>
<td><Input type="button" Name="plus" Value="+" OnClick="checkValidity()"></td>
<td><Input type="button" Name="minus" Value="-" OnClick="Calculator.Result.value += '-'"></td>
</tr>
<tr>
<td><Input type="button" Name="equals" Value="=" OnClick="Calculator.Result.value = eval(Calculator.Result.value)"></td>
<td><Input type="button" Name="divide" Value="/" OnClick="Calculator.Result.value += '/'"></td>
<td><Input type="button" Name="multiply" Value="*" OnClick="Calculator.Result.value += '*'"></td>
<td><Input type="button" Name="clear" Value="C" OnClick="Calculator.Result.value = ''"></td>
</tr>
</table>
<span id="HoursWorkedThisWeek"></span>
<Input type="button" Name="Save" Value="Save" OnClick="Calculator.HoursWorkedThisWeek = Calculator.Result.value">
<Input type="button" Name="Submit" Value="Submit">
</form>
</head>
</html>
try this it worked
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form id="Calculator" name="Calculator">
First name:
<br>
<input type="text" name="firstname">
<br>
Last name:
<br>
<input type="text" name="lastname">
<br>
Student ID:
<br>
<input type="text" name="ID">
<br>
Biography:
<br>
<textarea maxlength=30 rows="2" cols="30">
</textarea>
<br>
Result:
<table border="1" style="width:100%">
<input type="text" name="Result" size="12">
<tr>
<td><Input type="button" Name="zero" Value="0" OnClick="Calculator.Result.value += '0'"> </td>
<td><Input type="button" Name="one" Value="1" OnClick="Calculator.Result.value += '1'"></td>
<td><Input type="button" Name="two" Value="2" OnClick="Calculator.Result.value += '2'"></td>
<td><Input type="button" Name="three" Value="3" OnClick="Calculator.Result.value += '3'"></td>
</tr>
<tr>
<td><Input type="button" Name="four" Value="4" OnClick="Calculator.Result.value += '4'"></td>
<td><Input type="button" Name="five" Value="5" OnClick="Calculator.Result.value += '5'"></td>
<td><Input type="button" Name="six" Value="6" OnClick="Calculator.Result.value += '6'"></td>
<td><Input type="button" Name="seven" Value="7" OnClick="Calculator.Result.value += '7'"></td>
</tr>
<tr>
<td><Input type="button" Name="eight" Value="8" OnClick="Calculator.Result.value += '8'"></td>
<td><Input type="button" Name="nine" Value="9" OnClick="Calculator.Result.value += '9'"></td>
<td><Input type="button" Name="plus" Value="+" OnClick="checkValid()"></td>
<td><Input type="button" Name="minus" Value="-" OnClick="Calculator.Result.value += '-'"></td>
</tr>
<tr>
<td><Input type="button" Name="equals" Value="=" OnClick="Calculator.Result.value = eval(Calculator.Result.value)"></td>
<td><Input type="button" Name="divide" Value="/" OnClick="Calculator.Result.value += '/'"></td>
<td><Input type="button" Name="multiply" Value="*" OnClick="Calculator.Result.value += '*'"></td>
<td><Input type="button" Name="clear" Value="C" OnClick="Calculator.Result.value = ''"></td>
</tr>
</table>
<span id="HoursWorkedThisWeek"></span>
<Input type="button" Name="Save" Value="Save" OnClick="Calculator.HoursWorkedThisWeek = Calculator.Result.value">
<Input type="button" Name="Submit" Value="Submit">
</form>
<script type="text/JavaScript">
function checkValid()
{
var Calculator = document.getElementById("Calculator")
var test =Calculator[4].value;
if (parseInt(Calculator[4].value) === parseInt(test, 10))
{
alert("Integer!");
}
else
{
alert("Not an integer, press C");
}
}
</script>
</body>
</html>
You made a few small mistakes that caused your code to not work.
I'll explain them after this working example:
function validate() {
if (Calculator.Result.value == parseInt(Calculator.Result.value,10)) {
alert("Integer!");
} else {
alert("Not an integer, press C");
}
}
<body>
<form name="Calculator">
First name: <br /><input type="text" name="firstname" /><br />
Last name: <br /><input type="text" name="lastname" /><br />
Student ID: <br /><input type="text" name="ID" /><br />
Biography: <br /><textarea maxlength=30 rows="2" cols="30"></textarea><br />
Result:
<table border="1" style="width:100%;">
<input type="text" name="Result" size="12" />
<tr>
<td><input type="button" name="zero" value="0" onclick="Calculator.Result.value += '0'" /> </td>
<td><input type="button" name="one" value="1" onclick="Calculator.Result.value += '1'" /></td>
<td><input type="button" name="two" value="2" onclick="Calculator.Result.value += '2'" /></td>
<td><input type="button" name="three" value="3" onclick="Calculator.Result.value += '3'" /></td>
</tr>
<tr>
<td><input type="button" name="four" value="4" onclick="Calculator.Result.value += '4'" /></td>
<td><input type="button" name="five" value="5" onclick="Calculator.Result.value += '5'" /></td>
<td><input type="button" name="six" value="6" onclick="Calculator.Result.value += '6'" /></td>
<td><input type="button" name="seven" value="7" onclick="Calculator.Result.value += '7'" /></td>
</tr>
<tr>
<td><input type="button" name="eight" value="8" onclick="Calculator.Result.value += '8'" /></td>
<td><input type="button" name="nine" value="9" onclick="Calculator.Result.value += '9'" /></td>
<td><input type="button" name="plus" value="+" onclick="validate()" /></td>
<td><input type="button" name="minus" value="-" onclick="Calculator.Result.value += '-'" /></td>
</tr>
<tr>
<td><input type="button" name="equals" value="=" onclick="Calculator.Result.value = eval(Calculator.Result.value)" /></td>
<td><input type="button" name="divide" value="/" onclick="Calculator.Result.value += '/'" /></td>
<td><input type="button" name="multiply" value="*" onclick="Calculator.Result.value += '*'" /></td>
<td><input type="button" name="clear" value="C" onclick="Calculator.Result.value = ''" /></td>
</tr>
</table>
<span id="HoursWorkedThisWeek"></span>
<input type="button" name="Save" value="Save" onclick="Calculator.HoursWorkedThisWeek = Calculator.Result.value" />
<input type="button" name="Submit" value="Submit" />
</form>
</body>
(fiddle: http://jsfiddle.net/z8umk2c6/6/)
You had all your elements inside the <head> tag. Only the <script> should be inside the head (or better yet, in a separate JS-file), all the HTML elements should be inside a <body> tag.
Your form didn't have an id, only a name. Therefor the variable Calculator (bad practice to use uppercase for variable-names) referred to nothing. In your case you don't even need the variable, because you just access the form by name directly, so I removed that variable at the start of the function.
(I recommend using ID's instead of names however, but that might just be personal preference.)
The === in the if-clause didn't work, it was too strict. == will work however.
"test" in the if-clause was nothing, it had no value. I rewrote the if-clause so that the value is checked against the integer-value of itself. If that integer-value is equals the original value, you know the original was an integer already.
And a few other mistakes that may or may not break the code, but were bad practice non the less:
OnClick should be onclick (all lowercase). Same goes for Name and Value.
Some <input> were written with an uppercase: <Input>.
<br> and <input> need their own closing tags, like so: <br /> and <input />
<body>
<center>
<h1>Online Calculator</h1>
<hr/>
<form name="frmCalculator" action="">
<table border="1" cellpadding="1" cellspacing="1" width="30%">
<tr>
<td colspan="4"><textarea style="width:100%" name="txtResult"></textarea></td>
</tr>
<tr>
<td colspan="4"><input type="reset" style="width:100%"/></td>
</tr>
<tr>
<td><input type="button" value=" 7 " onclick="7"/></td>
<td><input type="button" value=" 8 " onclick="8"/></td>
<td><input type="button" value=" 9 " onclick="9"/></td>
<td><input type="button" value=" + " onclick="plus()"/></td>
</tr>
<tr>
<td><input type="button" value=" 4 " onclick="4"/></td>
<td><input type="button" value=" 5 " onclick="5"/></td>
<td><input type="button" value=" 6 " onclick="6"/></td>
<td><input type="button" value=" - " onclick="subtract()"/></td>
</tr>
<tr>
<td><input type="button" value=" 1 " onclick="1"/></td>
<td><input type="button" value=" 2 " onclick="2"/></td>
<td><input type="button" value=" 3 " onclick="3"/></td>
<td><input type="button" value=" * " onclick="times()"/></td>
</tr>
<tr>
<td><input type="button" value=" 0 " onclick="0"/></td>
<td><input type="button" value=" . " onclick="."/></td>
<td><input type="button" value=" = " onclick="total()"/></td>
<td><input type="button" value=" / " onclick="divide()"/></td>
</tr>
</table>
</form>
</center>
</body>
I'm making a calculator. How do I make the input from the button display on the textarea? I have to make the numbers display on the text area like a normal calculator. I can't use jquery because we haven't learned it yet.
To add the numbers to the textarea you can use this code:
var button = document.querySelectorAll('input[type=button]');
for(var x=0; x<button.length; x++)
{
button[x].addEventListener('click', function(e) {
var a = document.getElementById('txt').value;
document.getElementById('txt').value = a + this.value;
});
}
If you want a list of all elements that match a selector, you can use document.querySelectorAll() and loop through the object list.
You will need to alter your html and delete all the wrong onclicks, you too should use the value attribute only for the actual value and not for code styling, as the output will include your spaces, too.
<center>
<h1>Online Calculator</h1>
<hr/>
<form name="frmCalculator" action="">
<table border="1" cellpadding="1" cellspacing="1" width="30%">
<tr>
<td colspan="4"><textarea style="width:100%" id="txt" name="txtResult"></textarea></td>
</tr>
<tr>
<td colspan="4"><input type="reset" style="width:100%"/></td>
</tr>
<tr>
<td><input type="button" value="7"/></td>
<td><input type="button" value="8"/></td>
<td><input type="button" value="9"/></td>
<td><input type="button" value="+" /></td>
</tr>
<tr>
<td><input type="button" value="4" /></td>
<td><input type="button" value="5" /></td>
<td><input type="button" value="6" /></td>
<td><input type="button" value="-" /></td>
</tr>
<tr>
<td><input type="button" value="1" /></td>
<td><input type="button" value="2"/></td>
<td><input type="button" value="3" /></td>
<td><input type="button" value="*" /></td>
</tr>
<tr>
<td><input type="button" value="0" /></td>
<td><input type="button" value="." /></td>
<td><input type="button" value="="/></td>
<td><input type="button" value="/" /></td>
</tr>
</table>
</form>
</center>
I didn't implement the calculating functions, but I hope this is enough for you to start with.
Simplistically, you can do:
<input type="button" value="7" onclick="this.form.txtResult.value = this.value">
However, you may want to add a listener to each button that is a number that does the same thing. The easiest way to do that is to add a class to the number buttons and give them all the same listener, so:
<input type="button" value="7" class="numberButton">
and use the load event to add the listeners:
window.onload = function() {
var buttons = document.querySelectorAll('.numberButton');
for (var i=0, iLen=buttons.length; i<iLen; i++) {
buttons[i].onclick = function(){
this.form.txtResult.value += this.value;
};
}
};
You can also add specific listeners for the other buttons.
PS. To get the buttons all the same size, use styles to set the width the same, don't use the value.
I'm trying to write a kiosk-style web app for iOS. I've created some buttons, which their only purpose is to insert some text into an input box, and everything seems fine. The problem is it's very very slow on the iPad itself.
Here's the function:
function addCode(key1){
var input1 = document.getElementById("productid");
input1.value += key1;
}
This is the input box:
<input type="text" id="productid" name="productid" placeholder="Product ID" readonly="true">
And here's how I call the function:
<input type="button" value="GEN" onclick="addCode('GEN');">
I'm not sure what's the problem here. As I've said, this works fine on my computer, but not on the iPad...
Thanks in Advance!
EDIT: Here's the complete code for the page
<!DOCTYPE HTML>
<html>
<head>
<title>Find a Product</title>
<link rel="stylesheet" href="fonts/mainfont.css">
<link rel="stylesheet" href="css/main.css">
<meta charset="UTF-8">
<script src="js/jquery.js"></script>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="viewport" content="user-scalable=no, width=device-width" />
<script>
function addCode(key1){
var input1 = document.getElementById("productid");
input1.value += key1;
}
function emptyCode(){
var input2 = document.getElementById("productid");
input2.value = "";
}
</script>
</head>
<body oncontextmenu="return false">
<div align="center">
<div id="find">
<form action="find_product.php" method="POST">
<fieldset>
<p><input type="text" id="productid" name="productid" placeholder="Product ID" readonly="true"></p>
<br />
<table border="0" width="320px">
<!--Row-->
<tr>
<td width="100px">
<p><input type="button" value="GEN" onclick="addCode('GEN');"></p>
</td>
<td width="10px"></td>
<td width="100px">
<p><input type="button" value="TST" onclick="addCode('TST');"></p>
</td>
<td width="10px"></td>
<td width="100px">
<p><input type="button" value="CSU" onclick="addCode('CSU');"></p>
</td>
</tr>
<!--EndRow-->
<!--Row-->
<tr>
<td width="100px">
<p><input type="button" value="1" onclick="addCode('1');"></p>
</td>
<td width="10px"></td>
<td width="100px">
<p><input type="button" value="2" onclick="addCode('2');"></p>
</td>
<td width="10px"></td>
<td width="100px">
<p><input type="button" value="3" onclick="addCode('3');"></p>
</td>
</tr>
<!--EndRow-->
<!--Row-->
<tr>
<td width="100px">
<p><input type="button" value="4" onclick="addCode('4');"></p>
</td>
<td width="10px"></td>
<td width="100px">
<p><input type="button" value="5" onclick="addCode('5');"></p>
</td>
<td width="10px"></td>
<td width="100px">
<p><input type="button" value="6" onclick="addCode('6');"></p>
</td>
</tr>
<!--EndRow-->
<!--Row-->
<tr>
<td width="100px">
<p><input type="button" value="7" onclick="addCode('7');"></p>
</td>
<td width="10px"></td>
<td width="100px">
<p><input type="button" value="8" onclick="addCode('8');"></p>
</td>
<td width="10px"></td>
<td width="100px">
<p><input type="button" value="9" onclick="addCode('9');"></p>
</td>
</tr>
<!--EndRow-->
<!--Row-->
<tr>
<td width="100px">
<p><input type="button" value="Clear" onclick="emptyCode();"></p>
</td>
<td width="10px"></td>
<td width="100px">
<p><input type="button" value="0" onclick="addCode('0');"></p>
</td>
<td width="10px"></td>
<td width="100px">
</td>
</tr>
<!--EndRow-->
</table>
<br />
<p><input type="submit" value="Find"></p>
</fieldset>
</form>
</div>
<!-- end login -->
</div>
</body>
</html>
How would I use JavaScript to add up some values from a form? I want to display the value in a read-only text field at the bottom of the form. Here is my code so far, I have made each form value the value of what I want to add:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
function checkAll(){
document.getElementById("notop").checked=false;
}
function uncheckAll(field)
{
for (i = 0; i < field.length; i++)
field[i].checked = false ;
}
</script>
</head>
<body>
<div class="head">
<h3 align="center">Gourmet Pizza</h3>
</div>
<div class="main">
<form action="" method="get" name="pizza">
<table border="1" cellpadding="5" cellspacing="3">
<tr>
<td>Name:</td>
<td><input name="name" type="text" id="name" /></td>
</tr>
<tr>
<td>E-Mail:</td>
<td><input name="email" type="text" id="email" /></td>
</tr>
<tr>
<td>Phone:</td>
<td><input name="name" type="text" id="phone"/></td>
</tr>
<tr>
<td style="border:none"><input name="size" type="radio" value="8.00" id="small" onclick="this.form.total.value=calculateTotal(this);" > <label for="small">Small ($8.00)</label></td>
<td style="border:none">
<input type="checkbox" name="topping" id="pepperoni" value="0.50" onClick="checkAll(document.pizza.topping)" class="top"/>
<label for="pepperoni">Pepperoni
</label>
<input type="checkbox" name="topping" id="sausage" value="0.50" onClick="checkAll(document.pizza.topping)" class="top" />
<label for="sausage">Sausage
</label>
</td>
</tr>
<tr>
<td style="border:none"><input name="size" type="radio" value="10.00" id="medium" onclick="this.form.total.value=calculateTotal(this);" /> <label for="medium">Medium ($10.00)</label></td>
<td style="border:none">
<input type="checkbox" name="topping" id="mushroom" value="0.50" onClick="checkAll(document.pizza.topping)" class="top"/>
<label for="mushroom">Mushroom
</label>
<input type="checkbox" name="topping" id="olive" value="0.50" onClick="checkAll(document.pizza.topping" class="top"/>
<label for="olive">Olive
</label>
</td>
</tr>
<tr>
<td style="border:none"><input name="size" type="radio" value="12.00" id="large" onclick="this.form.total.value=calculateTotal(this);" onselect="addTwelve()"/> <label for="large">Large ($12.00)</label></td>
<td style="border:none">
<input type="checkbox" name="Un_CheckAll" value="0.00" id="notop" class="none" onClick="uncheckAll(document.pizza.topping)"/>
<label for="notop">No Toppings (Cheese Pizza)
</label>
</td>
</tr>
<tr>
<td colspan="2">
Your Order:<br />s
<textarea name="" colums="2">
</textarea>
</td>
</tr>
<tr align="center">
<td colspan="2"><input type="submit" name="button" id="button" value="Process Order" />
<input type="reset" name="button2" id="button2" value="Clear Order" /></td>
</tr>
</table>
</form>
</div>
</body>
</html>
Any help is greatly appreciated!
you can do something like this
var total = 0;
window.onload = function() {
var toppings = document.pizza.topping;
for (var i = 0, l = toppings.length; i < l; i++) {
toppings[i].addEventListener("change", function() {
if (this.checked) {
total += parseFloat(this.value);
} else {
total -= parseFloat(this.value);
}
alert(total);
}, false);
}
};
see example here