Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Feb 2013
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy Clone table row on fly

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

    Code:
    <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>

    Code:
    
    <?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>

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    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().
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •