Making total: checkbox and text inputs - HTML Forums

bl4ck1c3 · 05-13-2008, 03:39 PM

Well what I'm trying to do it's this:

I have 1 check box, and 3 text boxes... and named them
check box named "cb" and the text boxes "quantity","price" and "total"

What I want??
Make the "total" text box to display ["quantity" * "price"] if the check box is checked without using a button...

Hope you've understand...

Some light

coothead · 05-13-2008, 06:30 PM

Hi there bl4ck1c3,

have a look at this example, it may possibly suit your requirements...

Code:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
#container {
    width:460px;
    padding:10px 0;
    border:1px solid #ccc;
    background-color:#eee;
    text-align:center;
    margin: 10px auto;
 }
label {
    padding-right:10px;
 }
#qu,#pr {
    width:40px;
 }
#to {
    width:60px;
 }
</style>

<script type="text/javascript">

   var df;
   var test=true;
   var setPrice;

window.onload=function() {
   df=document.forms[0];
df[0].onclick=function() {
   q=parseFloat(df[1].value);
   p=setPrice=parseFloat(df[2].value);
if((Math.floor(q)!=Math.ceil(q))&&(!isNaN(q))){
   alert('we cannot split an item, so will assume that you meant the lower value');
   df[1].value=q=Math.floor(q);
 }
if((isNaN(q))||(isNaN(p))||(q=='')||(p=='')) {
   alert('numbers needed!!!');
   df.reset();
   df[1].focus();
   return;
 }
if(test==true) {
   df[3].value=q*p;
   test=false;
 }
else {
   df[1].value='';
   df[2].value=setPrice;
   df[3].value='';
   df[1].focus();
   test=true;
   }
  }
 }
</script>

</head>
<body>

<form action="#">
<div id="container">
<input type="checkbox">
<label>quantity :</label><input id="qu" type="text" maxlength="4">
<label>price : $</label><input id="pr" type="text" value="17.50">
<label>total : $</label><input id="to" type="text">
</div>
</form>

</body>
</html>

bl4ck1c3 · 05-14-2008, 07:35 AM

Quote:

Originally Posted by coothead

Hi there bl4ck1c3,

have a look at this example, it may possibly suit your requirements...

Code:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
#container {
    width:460px;
    padding:10px 0;
    border:1px solid #ccc;
    background-color:#eee;
    text-align:center;
    margin: 10px auto;
 }
label {
    padding-right:10px;
 }
#qu,#pr {
    width:40px;
 }
#to {
    width:60px;
 }
</style>

<script type="text/javascript">

   var df;
   var test=true;
   var setPrice;

window.onload=function() {
   df=document.forms[0];
df[0].onclick=function() {
   q=parseFloat(df[1].value);
   p=setPrice=parseFloat(df[2].value);
if((Math.floor(q)!=Math.ceil(q))&&(!isNaN(q))){
   alert('we cannot split an item, so will assume that you meant the lower value');
   df[1].value=q=Math.floor(q);
 }
if((isNaN(q))||(isNaN(p))||(q=='')||(p=='')) {
   alert('numbers needed!!!');
   df.reset();
   df[1].focus();
   return;
 }
if(test==true) {
   df[3].value=q*p;
   test=false;
 }
else {
   df[1].value='';
   df[2].value=setPrice;
   df[3].value='';
   df[1].focus();
   test=true;
   }
  }
 }
</script>

</head>
<body>

<form action="#">
<div id="container">
<input type="checkbox">
<label>quantity :</label><input id="qu" type="text" maxlength="4">
<label>price : $</label><input id="pr" type="text" value="17.50">
<label>total : $</label><input id="to" type="text">
</div>
</form>

</body>
</html>

great!! that work!

but if the quantity is changed after the check box being checked the total doesn't change... and that can be a problem... can something be done ?

bl4ck1c3 · 05-14-2008, 09:08 AM

I've got a simple I've made still not finished I still have to make a check for empty fields, I just need this... I have various check boxes and text forms, but i would like to use the same function for them all!!
And i did it exept the total field i don't know how to make it work without defining an expecific text box... Here's the code

Code:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script language="javascript">
var s;
function calculate(val,q,p) {
if (val == true) {
	s = q*p;
	document.formT.total.value = s;
}
}

</script>
</head>

<body><form name="formT">
<input type="checkbox" name="cb" onclick="calculate(formT.cb.checked,formT.quantidade.value,formT.preco.value);"/>
<input type="text" name="quantidade" />
<input type="text" name="preco" />
<input type="text" name="total" />
</form>

<form name="formR">
<input type="checkbox" name="cb" onclick="calculate(formR.cb.checked,formR.quantidade.value,formR.preco.value);"/>
<input type="text" name="quantidade" />
<input type="text" name="preco" />
<input type="text" name="total" />
</form>

</body>
</html>

what can I do with the document.formT.total.value = s; so that the function works too for the formR... I don't know If I've been clear...

coothead · 05-14-2008, 05:54 PM

Hi there bl4ck1c3,

have a look at this revised example...

Code:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
#container {
    width:460px;
    padding:10px 0;
    border:1px solid #ccc;
    background-color:#eee;
    text-align:center;
    margin: 10px auto;
 }
label {
    padding-right:10px;
 }
input[type=checkbox] {
    width:20px;
}
.qp {
    width:40px;
 }
.to {
    width:60px;
 }
</style>

<script type="text/javascript">

   var d,df,q,p;
   var test=[true,true,true,true];  /* the number of trues must be the same as the number of checkboxes*/
   var setPrice;
   var mess1='numbers needed!!!';
   var mess2='we cannot split an item, so will assume that you meant the lower value';

window.onload=function() {
   d=document;
   df=d.forms[0];
   inps=df.getElementsByTagName('input');
for(c=0;c<inps.length;c++){
if(inps[c].type=='checkbox') {
   inps[c].onclick=function() {
   calc(this.id.split('cb')[1]);
   }
  }
 }
for(c=0;c<test.length;c++) {
d.getElementById('qu'+c).onblur=function() {
   q=parseFloat(this.value);
   k=this.id.split('qu')[1];
if(test[k]==false){

if((isNaN(q))||(isNaN(d.getElementById('pr'+k).value))||(q=='')||(d.getElementById('pr'+k).value=='')) {
   alert(mess1);
   d.getElementById('cb'+k).checked=false;
   d.getElementById('qu'+k).value='';
   d.getElementById('qu'+k).focus();
   return;
 }
if((Math.floor(q)!=Math.ceil(q))&&(!isNaN(q))){
   alert(mess2);
   d.getElementById('qu'+k).value=q=Math.floor(q);
 }
   d.getElementById('to'+k).value=q*d.getElementById('pr'+k).value;
    }
   }
  }
 }

function calc(n){

   q=parseFloat(d.getElementById('qu'+n).value);
   p=setPrice=parseFloat(d.getElementById('pr'+n).value);

if((isNaN(q))||(isNaN(p))||(q=='')||(p=='')) {
   alert(mess1);
   d.getElementById('cb'+n).checked=false;
   d.getElementById('qu'+n).value='';
   d.getElementById('qu'+n).focus();
   return;
 }
if((Math.floor(q)!=Math.ceil(q))&&(!isNaN(q))){
   alert(mess2);
   d.getElementById('qu'+n).value=q=Math.floor(q);
 }
if(test[n]==true) {
   d.getElementById('to'+n).value=q*p;
   test[n]=false;
 }
else {
   d.getElementById('qu'+n).value='';
   d.getElementById('pr'+n).value=setPrice;
   d.getElementById('to'+n).value='';
   d.getElementById('qu'+n).focus();
   test[n]=true;
  }
 }
</script>

</head>
<body>

<form action="#">
<div id="container">

<input id="cb0" type="checkbox">
<label>quantity :</label><input id="qu0" class="qp" type="text" maxlength="4">
<label>price : $</label><input id="pr0" class="qp" type="text" value="17.50">
<label>total : $</label><input id="to0" class="to" type="text">

<input id="cb1" type="checkbox">
<label>quantity :</label><input id="qu1" class="qp" type="text" maxlength="4">
<label>price : $</label><input id="pr1" class="qp" type="text" value="38.25">
<label>total : $</label><input id="to1" class="to" type="text">

<input id="cb2" type="checkbox">
<label>quantity :</label><input id="qu2" class="qp" type="text" maxlength="4">
<label>price : $</label><input id="pr2" class="qp" type="text" value="15.00">
<label>total : $</label><input id="to2" class="to" type="text">

<input id="cb3" type="checkbox">
<label>quantity :</label><input id="qu3" class="qp" type="text" maxlength="4">
<label>price : $</label><input id="pr3" class="qp" type="text" value="1.00">
<label>total : $</label><input id="to3" class="to" type="text">

</div>
</form>

</body>
</html>

bl4ck1c3 · 05-15-2008, 06:33 AM

a little confusing for me but I think I got it!

Thanks for you time!

coothead · 05-15-2008, 08:15 AM

Hi there bl4ck1c3,

Quote:

a little confusing for me but I think I got it!

It had a similar effect for me also.

Bear in mind that most of the complications come with the problems of input validation.