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 4 of 4
  1. #1
    New Coder
    Join Date
    Nov 2007
    Location
    delhi,india
    Posts
    51
    Thanks
    23
    Thanked 0 Times in 0 Posts

    auto add pre defined input fields in a form and total the same dynamically

    hi forum
    i have a form in which i have four input fields for pieces to be entered and 4 fields for amount
    what i want is that the first pieces-t1 should be visible and rest three should not show up on the form unless asked for.
    can anyone suggest me a way to do this
    i have come across a lot of help areas where we can add input fields but in my case i have only predefined 3 fields
    the code is below
    Code:
    <td>Pieces-t1</td>
    <td><input type="text" name="txttp1" tabindex="5"  size="4" onfocus="this.style.backgroundColor='#C6AEC7';" onblur="this.style.backgroundColor='#FAF8CC';"></font>
    
    Amount-t1
    <input type="text" name="txttamt1" tabindex="5"  size="6" onfocus="this.style.backgroundColor='#C6AEC7';" onblur="this.style.backgroundColor='#FAF8CC';"></font>
    </td>
    </tr>
    <tr>
    <td>
    
    Pieces-t2
    </td>
    <td>
    <input type="text" name="txttp2" tabindex="5"  size="4" onfocus="this.style.backgroundColor='#C6AEC7';" onblur="this.style.backgroundColor='#FAF8CC';"></font>
    
    Amount-t2
    <input type="text" name="txttamt2" tabindex="5"  size="6" onfocus="this.style.backgroundColor='#C6AEC7';" onblur="this.style.backgroundColor='#FAF8CC';"></font>
    </td>
    </tr><tr>
    <td>
    
    Pieces-t3
    </td>
    <td>
    <input type="text" name="txttp3" tabindex="5"  size="4" onfocus="this.style.backgroundColor='#C6AEC7';" onblur="this.style.backgroundColor='#FAF8CC';"></font>
    
    Amount-t3
    <input type="text" name="txttamt3" tabindex="5"  size="6" onfocus="this.style.backgroundColor='#C6AEC7';" onblur="this.style.backgroundColor='#FAF8CC';"></font>
    </td></tr><tr>
    <td>
    
    Pieces-t4
    </td>
    <td>
    <input type="text" name="txttp4" tabindex="5"  size="4" onfocus="this.style.backgroundColor='#C6AEC7';" onblur="this.style.backgroundColor='#FAF8CC';"></font>
    
    Amount-t4
    <input type="text" name="txttamt4" tabindex="5"  size="6" onfocus="this.style.backgroundColor='#C6AEC7';" onblur="this.style.backgroundColor='#FAF8CC';"></font>
    </td></tr>
    can you guys suggest me some solution for this?
    also is there any way i can get the total of pieces and amount at the end
    and a grand total being total pieces*amount
    smile always
    anand
    Last edited by meenakshia; 06-10-2008 at 07:43 PM. Reason: more information to be added
    smile always:)

  • #2
    New Coder
    Join Date
    Nov 2007
    Location
    delhi,india
    Posts
    51
    Thanks
    23
    Thanked 0 Times in 0 Posts
    hi
    i think i have not clearly stated what i was looking for
    i will try to do this againple bear with me
    what i want is that the input fields
    pieces-t1 and amount-t1 should be visible
    rest three pieces-t2,t3,t4 and amount-t2,t3,t4 should not show initially
    when i click on add button one filed should show up that is t2 and then t3 and then t4 when clicked but t4 fields are the end.i dont want to go ahead with adding more fields
    smile always
    anand
    smile always:)

  • #3
    New to the CF scene
    Join Date
    Jun 2008
    Posts
    1
    Thanks
    0
    Thanked 1 Time in 1 Post
    You should be able to cobble something together from existing scripts with similar functionality. I think the script found here http://javascript.internet.com/forms...t-fields.html# would serve as a good starting point for getting the new input fields to appear. Some clever search queries will probably bring up links on how to create a cumulative sum of the total.

  • Users who have thanked finaddict for this post:

    meenakshia (06-30-2008)

  • #4
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,522
    Thanks
    3
    Thanked 508 Times in 495 Posts
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <style type="text/css">
    /*<![CDATA[*/
    .hide {
      display:none;
    }
    
    /*]]>*/
    </style>
    
    <script language="JavaScript" type="text/javascript">
    /*<![CDATA[*/
    
    function Add(id){
     var tbdy=document.getElementById(id);
     var trs=tbdy.getElementsByTagName('TR');
     for (var zxc0=0;zxc0<trs.length;zxc0++){
      if (trs[zxc0].className&&trs[zxc0].className=='hide'){
       trs[zxc0].className='';
       break;
      }
     }
    }
    
    function Totals(but,id,pieces,amount){
     var tbdy=document.getElementById(id);
     var ips=tbdy.getElementsByTagName('INPUT');
     for (var ptotal=0,atotal=0,zxc0=0;zxc0<ips.length;zxc0++){
      ips[zxc0].value=ips[zxc0].value.replace(/\D/,'');
      if (ips[zxc0].value.length>0){
       if (zxc0%2==0) ptotal+=ips[zxc0].value*1;
       else atotal+=ips[zxc0].value*1;
      }
     }
     but.form[pieces].value=ptotal;
     but.form[amount].value=atotal;
    }
    
    /*]]>*/
    </script>
    </head>
    
    <body>
    <form >
    <table>
    <tbody id="tst" >
    <tr>
    <td>Pieces-t1</td>
    <td><input type="text" name="txttp1" tabindex="5"  size="4" onfocus="this.style.backgroundColor='#C6AEC7';" onblur="this.style.backgroundColor='#FAF8CC';"></font>
    
    Amount-t1
    <input type="text" name="txttamt1" tabindex="5"  size="6" onfocus="this.style.backgroundColor='#C6AEC7';" onblur="this.style.backgroundColor='#FAF8CC';"></font>
    </td>
    </tr>
    <tr class="hide" >
    <td>
    
    Pieces-t2
    </td>
    <td>
    <input type="text" name="txttp2" tabindex="5"  size="4" onfocus="this.style.backgroundColor='#C6AEC7';" onblur="this.style.backgroundColor='#FAF8CC';"></font>
    
    Amount-t2
    <input type="text" name="txttamt2" tabindex="5"  size="6" onfocus="this.style.backgroundColor='#C6AEC7';" onblur="this.style.backgroundColor='#FAF8CC';"></font>
    </td>
    </tr><tr class="hide" >
    <td>
    
    Pieces-t3
    </td>
    <td>
    <input type="text" name="txttp3" tabindex="5"  size="4" onfocus="this.style.backgroundColor='#C6AEC7';" onblur="this.style.backgroundColor='#FAF8CC';"></font>
    
    Amount-t3
    <input type="text" name="txttamt3" tabindex="5"  size="6" onfocus="this.style.backgroundColor='#C6AEC7';" onblur="this.style.backgroundColor='#FAF8CC';"></font>
    </td>
    </tr>
    <tr class="hide" >
    <td>
    
    Pieces-t4
    </td>
    <td>
    <input type="text" name="txttp4" tabindex="5"  size="4" onfocus="this.style.backgroundColor='#C6AEC7';" onblur="this.style.backgroundColor='#FAF8CC';"></font>
    
    Amount-t4
    <input type="text" name="txttamt4" tabindex="5"  size="6" onfocus="this.style.backgroundColor='#C6AEC7';" onblur="this.style.backgroundColor='#FAF8CC';"></font>
    </td>
    </tr>
    </tbody>
    <tbody>
    <tr>
    <td>
    <input type="button" name="" value="Add" onclick="Add('tst');" />
    </td>
    <td>
    <input type="button" name="" value="Totals" onclick="Totals(this,'tst','Pieces','Amount');" />
    </td>
    </tr>
    <tr>
    <td>
     Pieces <input name="Pieces" /><br />
    </td>
    <td>
     Amount <input name="Amount" />
    </td>
    </tr>
    </tbody>
    </table>
    </form>
    </body>
    
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • Users who have thanked vwphillips for this post:

    meenakshia (06-30-2008)


  •  

    Posting Permissions

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