Member Avatar for manu555 
<script language="javascript">

function add()
{

		var divTag = document.createElement("div");
       	divTag.id = "div";
		//alert(divTag.id);
       
        //divTag.setAttribute("align","center");
       
        //divTag.style.margin = "0px auto";
       var j=1;
        divTag.className ="dynamicDiv";
var v1 =document.getElementById('ttlBoxes').value;
var v2 =document.getElementById('boxno').value;

var d1=parseInt(document.getElementById('ttlBoxes').value);
var d2=parseInt(document.getElementById('boxno').value);
if(v1!=""&& v2!="")
{
if(d2<d1)
{
       
divTag.innerHTML ='<br /><table width="101%" border="0" align="center" cellpadding="5" cellspacing="1" class="entryTable" ><tr ><td  width="150" class="label" ><select id="boxtype" name="boxtype+j" ><option value="select">Select</option><option value="Amb">Amb</option><option value="Frz">Frz</option><option value="Ref">Ref</option><option value="Gen">Gen</option></select>&nbsp;&nbsp;&nbsp;&nbsp;<select id="box" name="box"><option value="select" >Select</option><option value="OurBox">Our Box</option><option value="DrBox">Dr.Box</option><option value="Other">Other</option></select>GrossWeight<input type="text" name="grWeight"  id="grWeight" value="0" onclick="calc(this)" readonly="readonly" /></td><td width="150" class="label" ><p>Box Nos.<input name="boxno" type="text" class="box" id="boxno" size="20" maxlength="255" value=""  /></p><p>ChargebleWeight<input type="text" name="crWeight"  id="crWeight" value="" /></p></td><td class="label" ><p>Dimension<input name="l" type="text" class="box" id="l" size="3" maxlength="255" value="" />x<input name="b+j" type="text" class="box" id="b" size="3" maxlength="255" value=""  />x<input name="h" type="text" class="box" id="h" size="3" maxlength="255" value="" /></p>  </td></tr></table>';
       
document.getElementById("my_div").appendChild(divTag);
		
}
else if (d2==d1)
{
alert("Box No. has reached max limit");
}
else if(d2>d1)
{
alert("OOps more than total numbers ");
}
}
else
{
alert("Please enter total Box/Box nos .");
}
}

</script>
<script type="text/javascript"> 
function calc(){ 
if ( isNaN(document.getElementById("l").value) == true )
{
alert('The  value is not numeric');
document.getElementById("l").value.focus();
document.getElementById("l").value.select();
return false;
}
if ( isNaN(document.getElementById("b").value) == true )
{
alert('The  value is not numeric');
document.getElementById("b").value.focus();
document.getElementById("b").value.select();
return false;
} 
if ( isNaN(document.getElementById("h").value) == true )
{
alert('The  value is not numeric');
document.getElementById("h").value.focus();
document.getElementById("h").value.select();
return false;
}
if ( isNaN(document.getElementById("boxno").value) == true )
{
alert('The  value is not numeric');
document.getElementById("boxno").value.focus();
document.getElementById("boxno").value.select();
return false;
}

   var l1 =parseFloat(document.getElementById("l").value);
  var b1 =parseFloat(document.getElementById("b").value);
  var h1 =parseFloat(document.getElementById("h").value);
  var box = parseFloat(document.getElementById("boxno").value);
 
     var r =(l1*b1*h1/6000)*box; 
     ( document.getElementById("grWeight").value) = r; 
     
} 
</script> 
<html>
<table>
 <tr>
    <td width="174" class="label">Total Boxes</td>
    <td colspan="3" class="content"><input name="ttlBoxes" type="text" class="box" id="ttlBoxes" size="20" maxlength="255"  
    value="" /></td>
  </tr>
 <tr id=myrow > 
     <td class="label">Box</td>
     <td class="label">
  <select id="boxtype" name="boxtype">
    <option value="select">Select</option>
     <option value="Amb">Amb</option>
     <option value="Frz">Frz</option>
     <option value="Ref">Ref</option>
     <option value="Gen">Gen</option>
  </select>&nbsp;&nbsp;&nbsp;&nbsp;
       <select id="box" name="box">
         <option value="select">Select</option>
         <option value="OurBox">Our Box</option>
         <option value="DrBox">Dr.Box</option>
         <option value="Other">Other</option>
       </select>          
     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Gross Weight  
        <input type="text" name="grWeight"  id="grWeight" value="0"  onclick="calc(this)"  readonly="readonly"/></td>   		 
	  <td  class="label"><p>Box Nos.
	    <input name="boxno" type="text" class="box" id="boxno" size="20" maxlength="255" value=""  
     />
	  </p>
	    <p>Chargeble Weight
	      <input type="text" name="crWeight"  id="crWeight" value=""  />
</p></td> 		
     <td class="label">
       <p>Dimension
         <input name="l" type="text" class="box" id="l" size="3" maxlength="255" 
     value="" />
         x
         <input name="b" type="text" class="box" id="b" size="3" maxlength="255" 
     value="" />
         x
         <input name="h" type="text" class="box" id="h" size="3" maxlength="255" 
     value="" />
       </p>
       <p>
        <input type="button" value="Add" onClick="add()">
       </p></td>
   </tr>   
   <tr>
   <td class="label"></td>
   <td class="label" colspan="3">  
 <div id="my_div" name="my_div">
<!--<input type="button" value="Add" onClick="add()">-->
</div></td>   
   </tr>
</table>
</html>

I want to show calculation of gross weight in Gross weight field using function calc().
Now firstime its working. Getting calculation but after adding div using function add(),function calc() is not working.there is no calculation of Gross weight by function add().I want to show calculation repeatatively.
Please help me.

  • 3 Contributors
  • 3 Replies
  • 175 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by manu555
Member Avatar for twiss

Well, you'll have to stop using ID's, use classes instead. It's easier if you start using a framework, such as jQuery.

Member Avatar for macgurl70

From what I understand after reading the post, you are wanting to add new div's into the container div each time a visitor clicks for a new calculation.

function add()
{

       var j=1;
       var v1 =document.getElementById('ttlBoxes').value;
       var v2 =document.getElementById('boxno').value;

       var d1=parseInt(document.getElementById('ttlBoxes').value);
       var d2=parseInt(document.getElementById('boxno').value);
       if(v1!=""&& v2!="")
      {
       if(d2<d1)
      {
       //This div does not exist yet, you have to create it
	   var divTag = document.createElement("div");
            divTag.setAttribute('class','dynamicDiv'); 
	   var mainDiv = document.getElementById("my_div");
	   //setting the class attribute - each id HAS to be unique
       
	   //creating the table that will populate the new div, since the div does not exist - neither does the table. 
	   var calcTable ='<table width="101%" border="0" align="center" cellpadding="5" cellspacing="1" class="entryTable">';
	   calcTable += '<tr ><td  width="150" class="label" ><select id="boxtype" name="boxtype+j" ><option value="select">Select</option><option value="Amb">Amb</option><option value="Frz">Frz</option><option value="Ref">Ref</option><option value="Gen">Gen</option></select>&nbsp;&nbsp;&nbsp;&nbsp;';
	   calcTable += '<select id="box" name="box"><option value="select" >Select</option><option value="OurBox">Our Box</option><option value="DrBox">Dr.Box</option><option value="Other">Other</option></select>GrossWeight<input type="text" name="grWeight"  id="grWeight" value="0" onclick="calc(this)" readonly="readonly" /></td>';
	   calcTable += '<td width="150" class="label" ><p>Box Nos.<input name="boxno" type="text" class="box" id="boxno" size="20" maxlength="255" value=""  /></p>';
	   calcTable += '<p>ChargebleWeight<input type="text" name="crWeight"  id="crWeight" value="" /></p></td>';
	   calcTable += '<td class="label" ><p>Dimension<input name="l" type="text" class="box" id="l" size="3" maxlength="255" value="" />x<input name="b+j" type="text" class="box" id="b" size="3" maxlength="255" value=""  />x';
	   calcTable += '<input name="h" type="text" class="box" id="h" size="3" maxlength="255" value="" /></p></td></tr></table>';
       //add the table to the new div
		divTag.appendChild(calcTable);
		//add the new div to the container div
		mainDiv.appendChild(divTag);
}
else if (d2==d1)
{
alert("Box No. has reached max limit");
}
else if(d2>d1)
{
alert("OOps more than total numbers ");
}
}
else
{
alert("Please enter total Box/Box nos .");
}
}

function calc(){ 
if ( isNaN(document.getElementById("l").value) == true )
{
alert('The  value is not numeric');
document.getElementById("l").value.focus();
document.getElementById("l").value.select();
return false;
}
if ( isNaN(document.getElementById("b").value) == true )
{
alert('The  value is not numeric');
document.getElementById("b").value.focus();
document.getElementById("b").value.select();
return false;
} 
if ( isNaN(document.getElementById("h").value) == true )
{
alert('The  value is not numeric');
document.getElementById("h").value.focus();
document.getElementById("h").value.select();
return false;
}
if ( isNaN(document.getElementById("boxno").value) == true )
{
alert('The  value is not numeric');
document.getElementById("boxno").value.focus();
document.getElementById("boxno").value.select();
return false;
}

   var l1 =parseFloat(document.getElementById("l").value);
  var b1 =parseFloat(document.getElementById("b").value);
  var h1 =parseFloat(document.getElementById("h").value);
  var box = parseFloat(document.getElementById("boxno").value);
 
     var r =(l1*b1*h1/6000)*box; 
     ( document.getElementById("grWeight").value) = r; 
     
}

I also combined all of the code, you don't need to specify it with each function. It's just a bit easier to read.

I admit to not testing it, I did not have the time but hopefully it works or at least helps with some code syntax.

Edited by macgurl70 because: Cleaning up syntax a bit
Member Avatar for manu555

Thank you..

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.