Clone table row on fly

[mukeshprasad4u]

Hi,
I am trying to write a javascript which adds row/clone row on fly to a webform which opens in a modal box and add up values of COst Price field.
If I do this without modal box it works fine but within modal box its doesn't works.
Please help!!!

<script type="text/javascript">
var clone;
function cloneRow(){
var rows=document.getElementById('mytab').getElementsByTagName('tr');
var index=rows.length;
clone=rows[index-1].cloneNode(true);
var inputs=clone.getElementsByTagName('input'), inp, i=0,n ;
while(inp=inputs[i++]){
inp.name=inp.name.replace(/\d/g,'')+(index+1);
}
}
function addRow(){
var tbo=document.getElementById('mytab').getElementsByTagName('tbody')[0];
tbo.appendChild(clone);
cloneRow();
}
function addValue(obj){
obj.value=obj.value.replace(/[^\d]/,'');
var fields=document.getElementsByTagName('input'), i=0, tot=0, f;
while(f=fields[i++]){
f.name&&f.name.match(/cost/)?tot+=Number(f.value):null;
}
document.getElementsByName('sum')[0].value=tot;
}
onload=cloneRow;
</script>

<?php
    include 'includes/header.inc.php';
?>
<div class="sidebar1">
<br><br>
    <ul class="nav">
  <li><a href="#receive">Receive</a></li>
  <li><a href="#">Link two</a></li>
  <li><a href="#">Link three</a></li>
  <li><a href="#">Link four</a></li>
    </ul>
    
    <!-- end .sidebar1 --></div>
    
   /*some php code ----*/

    <div id="receive" class="modalDialog">
    <div>
        <a href="#close" title="Close" class="close">X</a>
        <form name="receive" method="post" action="receive.php">
        <fieldset>
            <legend>Receive:</legend>
            <table>
            <tr>
            <td align="right">Supplier:</td>
            <td align="left">
            <?php
            echo "<select name=\"suppliers\" value=''>Supplier</option>";
            // printing the list box select command

            while($nt=mysql_fetch_array($result1)){//Array or records stored in $nt
            echo "<option value=$nt[id]>$nt[name]</option>";
            /* Option values are added by looping through the array */
            }
            echo "</select>";// Closing of list box
            ?>
            </td>
            <tr>
            <td align="right">Date:</td>
            <td align="left"><input id='start_dt' class='datepicker' name="date"/></td>
            </tr>
            <tr>
            <td align="right">Bill No:</td>
            <td align="left"><input type="text" size="10" name="billNo" /></td>
            </tr>
            </table>
            <br><br>
            <!--// receivings transaction table -->
            <table id="mytab" border="1">
            <tr>
            <th>Sl No.</th>
            <th>Item Name</th>
            <th>Quantity</th>
            <th>Unit</th>
            <th>Cost Price</th>
            </tr>
            <tr>
            <td><input type="text" size="3" name="slno"></td>
            <td>
            <?php
            
            echo "<select name=\"items\" value=''>Item</option>";
            // printing the list box select command

            while($nt=mysql_fetch_array($result)){//Array or records stored in $nt
            echo "<option value=$nt[id]>$nt[name]</option>";
            /* Option values are added by looping through the array */
            }
            echo "</select>";// Closing of list box
            ?>
            </td>
            <td><input type="text" size="4" name="quantity"></td>
            <td><input type="text" size="4" name="unit"></td>
            <td><input type="text" size="4" name="costprice" onkeyup="addValue(this)"></td>
            </tr>
        </table>
        <br>
        <input type="button" value="Add a new row" onclick="addRow()">
        <p>
        Total: <input type="text" name="sum" readonly="readonly" value="Sum of Cost Price inputs">
        </fieldset>
       <input type="submit" value="Receive">
        </form>
    </div>
    </div>

[Old Pedant]

I don't get this.

You call cloneRow() as soon as the page is added.

Which presumably (maybe correctly, maybe not...didn't test it) clones one row and stores it away for now.

Then when the button is clicked on you call addRow().

Okay, that may work first time the button is pressed. But the second time it is pressed you will be *STILL* adding the *SAME CLONE*.

So all the added rows will have inputs with the SAME NAMES. Your cutesy trick of using the row number [icode]inp.name=inp.name.replace(/\d/g,'')+(index+1);[/code] to the name will work...but only ONE TIME.

You need to *combine* your addRow() and cloneRow() code into one function.

Kill off cloneRow().