...

View Full Version : Javascript Help - Checkboxes



micha3l26
05-10-2009, 08:22 AM
So I'm making a little website, with the idea of allowing the customer to choose clothes via check boxes.

There is 8 clothes for selection each like this <td><input type="checkbox" name="0001" value="0001"></td>

up to 0008.

i have a vague idea of how to assign a price to the 0001 and so forth but im not to sure if I'm heading in the right direction.

So i need to put an if statement saying if the box is ticked the price = 15. If not it = 0.

Here's what I've started with,

var 0001price = document.merch.0001.value;
document.merch.0001.value= (15);
}

any help would be appreciated greatly!

micha3l26
05-10-2009, 08:34 AM
Forgot to check the rest of the forum first. Sorry.

Will this help me

http://www.codingforums.com/showthread.php?t=165539&highlight=checkboxes

Old Pedant
05-10-2009, 08:44 AM
You should *NOT* use names that start with a digit.

Also, *probably* you want the names of all the checkboxes to be the same.

SO something like:


<body>
<form ...>
<input type=hidden name="price_1" value="3.95">
<input type=checkbox name="clothes" value="1" onclick="buy(this);"> Socks, $3.95 a pair

<input type=hidden name="price_2" value="22.95">
<input type=checkbox name="clothes" value="2" onclick="buy(this);"> Shoes, $22.95 a pair
...
<input name="total" READONLY value="0.0">
...
</form>

And then the JS code is simple:


<script>
function buy(fld)
{
var form = fld.form;
var clothes = form.clothes;
var total = 0;
for ( var c = 0; c < clothes.length; ++c )
{
var cb = clothes[c];
if ( cb.checked )
{
var price = parseFloat( form.elements["price_" + cb.value] );
total += price;
}
}
form.total.value = total.toFIxed(2);
}
</script>


Untested, off the top of my head. Is it close?

And that page you linked to works, but it's very clumsy. Should be written in about a quarter the code.

micha3l26
05-10-2009, 08:59 AM
Thanks mate for the help.

I was looking for something like that topic I linked, as it's the only way i really know.

Ill try this, it's just I'm not that experienced in coding just yet, this way seems abit more complicated to me. haha. Yea but makes sense to condense it.

So your saying the way i'm doing it won't work? Or its just not the most efficient way?

But yea ill take what you said on board.

JS CODE

//var 0001 = 15;
//var 0002 = 15;
//var 0003 = 15;
//var 0004 = 30;
//var 0005 = 30;
//var 0006 = 15;
//var 0007 = 15;
//var 0008 = 15;

//if (merch.0001.checked){
//var 0001 = document.merch.0001.value = 0001;
//} else {
//var 0001 = document.merch.0001.value = 0;
//}

//if (merch.0002.checked){
//var 0002 = document.merch.0002.value = 0002;
//} else {
//var 0002 = document.merch.0002.value = 0;
//}

//if (merch.0003.checked){
//var 0003 = document.merch.0003.value = 0003;
//} else {
//var 0003 = document.merch.0003.value = 0;
//}

//if (merch.0004.checked){
//var 0004 = document.merch.0004.value = 0004;
//} else {
//var 0004 = document.merch.0004.value = 0;
//}

//if (merch.0005.checked){
//var 0005 = document.merch.0005.value = 0005;
//} else {
//var 0005 = document.merch.0005.value = 0;
//}


//if (merch.0006.checked){
//var 0006 = document.merch.0006.value = 0006;
//} else {
//var 0006 = document.merch.0006.value = 0;
//}


//if (merch.0007.checked){
//var 0007 = document.merch.0007.value = 0007;
//} else {
//var 0007 = document.merch.0007.value = 0;
//}


//if (merch.0008.checked){
//var 0008 = document.merch.0008.value = 0008;
//} else {
//var 0008 = document.merch.0008.value = 0;
//}

//document.merch.total.value = 0001 + 0002 + 0003 + 0004 + 0005 + 0006 + 0007 + 0008;
//}


CODE

<tr>
<td><input type="checkbox" name="0001" value="0001"></td>
<td><input type="checkbox" name="0002" value="0002"></td>
<td><input type="checkbox" name="0003" value="0003">&nbsp;</td>
<td><input type="checkbox" name="0004" value="0004">&nbsp;</td>
<td><input type="checkbox" name="0005" value="0005">&nbsp;</td>
<td><input type="checkbox" name="0006" value="0006">&nbsp;</td>
<td><input type="checkbox" name="0007" value="0007">&nbsp;</td>
<td><input type="checkbox" name="0008" value="0008">&nbsp;</td>
</tr>
<tr>

Philip M
05-10-2009, 09:34 AM
Javascript variable names and HTML element names may not start with a number/digit.


He thought he saw a Argument
That proved he was the Pope:
He looked again, and found it was
A Bar of Mottled Soap.
"A fact so dread," he faintly said,
"Extinguishes all hope!"
- Lewis Carroll

adios
05-11-2009, 01:46 AM
Just another approach. Makes it unnecessary to jam data into your HTML, and lets your server see whatever it needs to see....


<html>
<head>
<style type="text/css">
body {
background: black;
}
#f1 {
width: 200px;
padding: 12px;
margin: 100px;
font: normal 12px helvetica;
color: white;
background: darkred;
border: 2px white dashed;
}
input {
padding: 1px;
background: darkred;
color: white;
border: none;
}
</style>
<script type="text/javascript">

var prices = //object literal
{
slouch_hat: 155.50 ,
argyll_socks: 22.99 ,
jockstrap: 15.50
}

function update()
{
var f = document.getElementById('f1'); //form
var inputs = f.getElementsByTagName('input'); //inputs
var input, total = i = 0;
for (var i = 0; i < inputs.length; i++) //loop
{
input = inputs[i];
if (input.className == 'item' && input.checked) //examine
{
total += parseFloat(prices[input.value]); //add data from 'prices' object
}
}
f.elements.total.value = total.toFixed(2); //print
}

function addListener(obj, evt, handler)
{
if (obj.addEventListener)
{
obj.addEventListener(evt, handler, false);
}
else if (obj.attachEvent)
{
obj.attachEvent('on' + evt, handler);
}
}

function set_update()
{
var f = document.getElementById('f1'); //form
var inputs = f.getElementsByTagName('input'); //inputs
for (var i = 0; i < inputs.length; i++) //loop
{
if (inputs[i].className == 'item') //gets handler
{
addListener(inputs[i], 'click', update); //assign handler
}
}
}

addListener(window, 'load', set_update); //don't call till form complete

</script>
</head>
<body>
<form id="f1" name="f1">
<strong>$</strong><input class="item" type="checkbox" name="buy" value="slouch_hat" />____Slouch Hat ($155.50)<br />
<strong>$</strong><input class="item" type="checkbox" name="buy" value="argyll_socks" />____Argyll socks ($22.99)<br />
<strong>$</strong><input class="item" type="checkbox" name="buy" value="jockstrap" />____Jockstrap ($15.50)<br /><br />
<hr />
<strong>$</strong><input type="text" name="total" value="0.00" size="3" readonly="readonly" />____total
</form>
</body>
</html>

Good explanation here (http://dev.opera.com/articles/view/objects-in-javascript/#whyobjects) of using object literals to associate bits of data with something else (like a price with a product).



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum