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";
 
        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[]" ><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[]" 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>  <input type="button" value="Add" onClick="add(this)"></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> 
 
<form action="processExport.php?action=add" method="post" enctype="multipart/form-data" name="frmAddUser" id="frmAddUser">
 <table width="101%" border="0" align="center" cellpadding="5" cellspacing="1" class="entryTable">
 
 <tr>
    <td width="169" 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;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">
 
</div></td>   
   </tr>
</table>
</form>

In above code there is <tr id=myrow > in which calculation part of field box no. ,l,b,h
which is done by javascript.but problem is that the javascript function operate only first time ,but after adding this <tr >again ,then javascript is not working .
please give me solution on that problem .

If there is any other way to doing this task plese tell me.

  • 1 Contributor
  • 1 Reply
  • 495 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by manu555

Dani AI

Generated

Quick diagnosis: the page creates many inputs with identical id values (for example id="l[]", id="boxno[]", id="grWeight[]"). document.getElementById() always returns the first matching id, so the global calc() in the original post only ever reads/writes the first row. The add() routine also injects HTML strings that reintroduce the same ids and never wires row-specific handlers, so newly-added rows have no reliable way for the script to find their fields.

Recommended approach (minimal, robust changes)

  • Keep form-array names for server-side (name="l[]" etc.) but remove duplicate id attributes. Give per-row controls classes instead (example classes: box-row, dim-l, dim-b, dim-h, box-count, gross).
  • Use event delegation (attach a single input listener on the container) or pass the event element into a row-specific function and use closest() / querySelector() to compute values for that row only.
  • Create rows from a hidden <template> or with cloneNode(true) instead of building long innerHTML strings; when cloning, remove or rewrite any ids so duplicates do not appear.

Practical example (plain JS — requires the HTML row to use the classes above):

/* delegate inputs inside #my_div */
document.getElementById('my_div').addEventListener('input', function(e){
  if (!e.target.matches('.dim-l, .dim-b, .dim-h, .box-count')) return;
  const row = e.target.closest('.box-row');
  if (!row) return;
  const l = parseFloat(row.querySelector('.dim-l').value) || 0;
  const b = parseFloat(row.querySelector('.dim-b').value) || 0;
  const h = parseFloat(row.querySelector('.dim-h').value) || 0;
  const boxes = parseInt(row.querySelector('.box-count').value, 10) || 1;
  row.querySelector('.gross').value = ((l * b * h) / 6000) * boxes;
});

/* clone a hidden template and strip duplicate ids */
function addRow(){
  const tpl = document.getElementById('box-template');
  const clone = tpl.content.cloneNode(true);
  clone.querySelectorAll('[id]').forEach(n => n.removeAttribute('id'));
  document.getElementById('my_div').appendChild(clone);
}

Troubleshooting tips

  • Open the browser console for errors (duplicate id warnings or null derefs).
  • If server-side code expects l[], leave the name attributes as-is and remove only the ids or make them unique (l-0, l-1, ...).
  • If jQuery is available, the same pattern works with $(container).on('input', '.dim-l, ...', handler).

For : switch the per-field selectors away from global getElementById(...) and adopt row-scoped queries (closest + querySelector). That will make the calculation work for every added row.

Member Avatar for manu555

Hello ,
please give me solution of problem in above task.

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.