<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.

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

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.

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.