Working out values of materials

**Jay Dog** · 01-17-2013, 04:30 PM

Hi,

I'm working on a project for a class of 11 year old children where they make metal insects, anyway I wanted to create a page where children could work out how much their models would cost.

I've done this before using Excel but wondered if there was a way of creating a webpage which allows someone to input data and then works out a specific value in this instance £s.

The Excel document looks like this:

Click image for larger version.

Name: excel.png
Views: 306
Size: 11.1 KB
ID: 4884

In Excel, Cell E2 has a value of =C2*D2*0.5 where 0.5 is the cost of the material, (this can be changed but C2 is the length of material and D2 is the amount they need) and so on...

Cell E6 has a value of =SUM(E2:E5) which adds up all the other values to give the children their final cost.

The problem is that our internal intranet pages doesn't like forms, I've tried to use them before but it doesn't like them.

There is a way of getting round this which involves me setting up a page on the school website and linking the Intranet site to that.

Is there a code similar in existence that will allow a child to work out the value of their model?

**vwphillips** · 01-17-2013, 10:55 PM

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" xml:lang="en" lang="en">

<head>
  <title></title>
<style type="text/css">
/*<![CDATA[*/

#mask { /* CSS for the background mask */
 position:fixed;z-Index:101;visibility:hidden;width:100%;height:100%;left:0px;top:0px;background-Color:#FFCC66;cursor:pointer;
/* Moz */
  opacity: .5;
/* IE5-7 */
  filter: alpha(opacity=50);
/* IE8 */
   -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
}

#form {
  position:fixed;
  visibility:hidden;
  z-Index:111;
  width:500px;
  height:190px;
  background-Color:#FFFFCC;
}


.table {
 border:solid black 1px;
}

.table INPUT {
  width:80px;
  border-Width:0px;
}

.table TD {
  width:80px;
  text-Align:center;
  border:solid black 1px;
}

.table TH {
  text-Align:center;
  border:solid black 1px;
  background-Color:#CCFFFF
}

.table .txt {
  width:150px;
}

.table .nu {
  width:20px;
  background-Color:#CCFFFF
}

.table .nu2 {
  width:80px;
}

.table .title {
  font-Weight:bold;
}

/*]]>*/
</style></head>

<body>

<input type="button" name="" value="Calculate" onmouseup="ShowForm('mask','form',true);" />
<div id="form" >
<form name="myform" >
 <table class="table">
  <tr>
   <th>&nbsp;</th>
   <th>A</th>
   <th>B</th>
   <th>C</th>
   <th>D</th>
   <th>E</th>
  </tr>
  <tr class="title" >
    <td class="nu" >1</td>
    <td class="nu2" >Item Nu.</td>
    <td class="txt" >Material</td>
    <td >Length</td>
    <td >Nu Rqud</td>
    <td >Cost</td>
  </tr>
  <tr>
    <td class="nu" >2</td>
    <td class="nu2" >1</td>
    <td class="txt" >13mm square</td>
    <td ><input name="r0" /></td>
    <td ><input name="r0" /></td>
    <td ><input name="r0" readonly /></td>
  </tr>
  <tr>
    <td class="nu" >3</td>
    <td class="nu2" >2</td>
    <td class="txt" >welding rod</td>
    <td ><input name="r1" /></td>
    <td ><input name="r1" /></td>
    <td ><input name="r1" readonly /></td>
  </tr>
  <tr>
    <td class="nu" >4</td>
    <td class="nu2" >3</td>
    <td class="txt" >brazing</td>
    <td ><input name="r2" /></td>
    <td ><input name="r2" /></td>
    <td ><input name="r2" readonly /></td>
  </tr>
  <tr>
    <td class="nu" >5</td>
    <td class="nu2" >4</td>
    <td class="txt" >paint</td>
    <td ><input name="r3" /></td>
    <td ><input name="r3" /></td>
    <td ><input name="r3" readonly /></td>
  </tr>
  <tr>
    <td class="nu" >6</td>
    <td class="nu2" colspan="4" >Cost</td>
     <td ><input name="cost" readonly /></td>
  </tr>
 </table>
</form>
</div>
<div id="mask" title="Click to Close" onmouseup="ShowForm('mask','form',false);" ></div>
E2 = C2*D2*0.5<br />
Cell E6 has a value of =SUM(E2:E5)


<script type="text/javascript">
/*<![CDATA[*/

function ShowForm(mid,fid,ud){
 var msk=document.getElementById(mid),frm=document.getElementById(fid);;
 frm.style.left=(msk.offsetWidth-frm.offsetWidth)/2+'px'
 frm.style.top=(msk.offsetHeight-frm.offsetHeight)/2+'px'
 frm.style.visibility=msk.style.visibility=ud?'visible':'hidden';
}

function calculate(ip){
 var frm=ip.form,ips=frm[ip.name],nu=0,z0=0;
 ip.value=ip.value.replace(/\D/g,'');
 ips[2].value='';
 if (ips[0].value&&ips[1].value){
  nu=ips[0].value*ips[1].value*0.5; // E2 = C2*D2*0.5
  ips[2].value=nu;
  InitForm.ary[ip.name.replace(/\D/g,'')*1]=nu;
 }
 for (nu=0;z0<InitForm.ary.length;z0++){
  if (typeof(InitForm.ary[z0])=='number'){
   nu+=InitForm.ary[z0];
  }
 }
 frm.cost.value=nu;
}

function InitForm(nme){
 var frm=document[nme],ips=frm.elements;
 InitForm.ary=[];
 for (var z0=0;z0<ips.length;z0++){
  ips[z0].onkeyup=function(){ calculate(this); }
 }
}

InitForm('myform');

/*]]>*/
</script></body>

</html>

**Jay Dog** · 01-18-2013, 09:13 AM

WOW!!!

That is amazing but the other materials have different values.

Welding Rod = 0.0004

Brazing = 0.000155

Paint = 0.5

This is something I am going to develop in our subject area as to help improve children's grades they need to show evidence of costing a manufactured product so if you could show me how you add extra values for different cells that'd be great as I can then copy and modify the code for other products from the children.

**vwphillips** · 01-18-2013, 02:01 PM

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" xml:lang="en" lang="en">

<head>
  <title></title>
<style type="text/css">
/*<![CDATA[*/

#mask { /* CSS for the background mask */
 position:fixed;z-Index:101;visibility:hidden;width:100%;height:100%;left:0px;top:0px;background-Color:#FFCC66;cursor:pointer;
/* Moz */
  opacity: .5;
/* IE5-7 */
  filter: alpha(opacity=50);
/* IE8 */
   -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
}

#form {
  position:fixed;
  visibility:hidden;
  z-Index:111;
  top:200px;
  width:500px;
  height:190px;
  background-Color:#FFFFCC;
}


.table {
 border:solid black 1px;
}

.table INPUT {
  width:80px;
  border-Width:0px;
}

.table TD {
  width:80px;
  text-Align:center;
  border:solid black 1px;
}

.table TH {
  text-Align:center;
  border:solid black 1px;
  background-Color:#CCFFFF
}

.table .txt {
  width:150px;
}

.table .nu {
  width:20px;
  background-Color:#CCFFFF
}

.table .nu2 {
  width:80px;
}

.table .title {
  font-Weight:bold;
}

/*]]>*/
</style></head>

<body>

<input type="button" name="" value="Calculate" onmouseup="ShowForm('mask','form',true);" />
<div id="form" >
<form name="myform" >
 <table class="table">
  <tr>
   <th>&nbsp;</th>
   <th>A</th>
   <th>B</th>
   <th>C</th>
   <th>D</th>
   <th>E</th>
  </tr>
  <tr class="title" >
    <td class="nu" >1</td>
    <td class="nu2" >Item Nu.</td>
    <td class="txt" >Material</td>
    <td >Length</td>
    <td >Nu Rqud</td>
    <td >Cost</td>
  </tr>
  <tr>
    <td class="nu" >2</td>
    <td class="nu2" >1</td>
    <td class="txt" >13mm square</td>
    <td ><input name="r0" /></td>
    <td ><input name="r0" /></td>
    <td ><input name="r0" readonly /></td>
  </tr>
  <tr>
    <td class="nu" >3</td>
    <td class="nu2" >2</td>
    <td class="txt" >welding rod</td>
    <td ><input name="r1" /></td>
    <td ><input name="r1" /></td>
    <td ><input name="r1" readonly /></td>
  </tr>
  <tr>
    <td class="nu" >4</td>
    <td class="nu2" >3</td>
    <td class="txt" >brazing</td>
    <td ><input name="r2" /></td>
    <td ><input name="r2" /></td>
    <td ><input name="r2" readonly /></td>
  </tr>
  <tr>
    <td class="nu" >5</td>
    <td class="nu2" >4</td>
    <td class="txt" >paint</td>
    <td ><input name="r3" /></td>
    <td ><input name="r3" /></td>
    <td ><input name="r3" readonly /></td>
  </tr>
  <tr>
    <td class="nu" >6</td>
    <td class="nu2" colspan="4" >Cost</td>
     <td ><input name="cost" readonly /></td>
  </tr>
 </table>
</form>
</div>
<div id="mask" title="Click to Close" onmouseup="ShowForm('mask','form',false);" ></div>
<br />
13mm square = 0.5<br />

Welding Rod = 0.0004<br />

Brazing = 0.000155<br />

Paint = 0.5<br />



<script type="text/javascript">
/*<![CDATA[*/

function ShowForm(mid,fid,ud){
 var msk=document.getElementById(mid),frm=document.getElementById(fid);;
 frm.style.left=(msk.offsetWidth-frm.offsetWidth)/2+'px'
 frm.style.top=(msk.offsetHeight-frm.offsetHeight)/2+'px'
 frm.style.visibility=msk.style.visibility=ud?'visible':'hidden';
}

function calculate(ip){
 var frm=ip.form,ips=frm[ip.name],ary=InitForm.ary[ip.name.replace(/\D/g,'')*1],nu=0,z0=0;
 ip.value=ip.value.replace(/\D/g,'');
 ips[2].value='';
 if (ips[0].value&&ips[1].value){
  nu=ips[0].value*ips[1].value*ary[0]; // E2 = C2*D2*0.5
  ips[2].value=nu;
  ary[1]=nu;
 }
 for (nu=0;z0<InitForm.ary.length;z0++){
  if (typeof(InitForm.ary[z0][1])=='number'){
   nu+=InitForm.ary[z0][1];
  }
 }
 frm.cost.value=nu;
}

function InitForm(nme,ary){
 var frm=document[nme],ips=frm.elements;
 InitForm.ary=ary;
 for (var z0=0;z0<ips.length;z0++){
  ips[z0].onkeyup=function(){ calculate(this); }
 }
}

InitForm('myform',[[.5],[0.0004],[0.000155],[.5]]);

/*]]>*/
</script></body>

</html>

**Jay Dog** · 01-23-2013, 09:40 AM

Yeah that's great but how do I 'unmask' it?

I really appreciate your time and effort but is there a way of removing the 'calculate' option and just having the table as it is?

Again many thanks.

J

**vwphillips** · 01-23-2013, 11:33 AM

Code:

function ShowForm(mid,fid,ud){
 var msk=document.getElementById(mid),frm=document.getElementById(fid);;
 frm.style.left=(msk.offsetWidth-frm.offsetWidth)/2+'px'
 frm.style.top=(msk.offsetHeight-frm.offsetHeight)/2+'px'
 frm.style.visibility=ud?'visible':'hidden';
}