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 12 of 12
  1. #1
    New Coder
    Join Date
    Jun 2012
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Pls help me how to code this...

    Code:
    <html>
    <head>
    
    <script type="text/javascript">
    
    function addRow()
    	{
    	var tbl = document.getElementById('tableId');
      	var lastRow = tbl.rows.length;
      	// if there's no header row in the table, then iteration = lastRow + 1
       	var row = tbl.insertRow(lastRow);
    	
    	// right cell
      	var cellRight = row.insertCell(0);
    	var el = document.createElement('input');
    	el.type = 'text';
      	el.name = 'txtRow';
      	el.id = 'txtRow';
      	el.size = 20;
     	cellRight.appendChild(el);
    	
    	var cellRight1 = row.insertCell(1);
    	var el1 = document.createElement('input');
    	el1.type = 'number';
      	el1.name = 'txtRow';
      	el1.id = 'txtRow';
      	el1.size = 3;  
    	cellRight1.appendChild(el1);
    	
    	var cellRight2 = row.insertCell(2);
    	var el2 = document.createElement('input');
    	el2.type = 'text';
      	el2.name = 'txtRow';
      	el2.id = 'txtRow';
      	el2.size = 20;  
    	cellRight2.appendChild(el2);
    	
    	var cellRight3 = row.insertCell(3);
    	var el3 = document.createElement('input');
    	el3.type = 'text';
      	el3.name = 'txtRow';
      	el3.id = 'txtRow';
      	el3.size = 20;  
    	cellRight3.appendChild(el3);
    	
    	var cellRight4 = row.insertCell(4);
    	var el4 = document.createElement('input');
    	el4.type = 'text';
      	el4.name = 'txtRow';
      	el4.id = 'txtRow';
      	el4.size = 20;  
    	cellRight4.appendChild(el4);
    	
    	var cellRight5 = row.insertCell(5);
    	var el5 = document.createElement('input');
    	el5.type = 'text';
      	el5.name = 'txtRow';
      	el5.id = 'txtRow';
      	el5.size = 10;  
    	cellRight5.appendChild(el5);
    	
    	var cellRight6 = row.insertCell(6);
    	var el6 = document.createElement('input');
    	el6.type = 'text';
      	el6.name = 'txtRow';
      	el6.id = 'txtRow';
      	el6.size = 20;  
    	cellRight6.appendChild(el6);
    	}
    	
    </script>
    </head>
    
    <body>
    	<table id="tableId" width="600" border="1">
       
     		<tr>
        		<td><center>Item:</center></td>
        		<td><center>Qty:</center></td>
        		<td><center>Manuf.:</center></td>
        		<td><center>Part #:</center></td>
        		<td><center>Description:</center></td>
        		<td><center>List Price:</center></td>
        		<td><center>Total:</center></td>            
             </tr>
    		<tr id="trAdd">
        		<td ><input type="text" placeholder="Item" name="item" id="item"></td>
        		<td><input type="number" size="3" name="qty" id="qty"></td>
        		<td><input type="text" placeholder="Manufacturer" name="manuf" id="manuf"></td>
        		<td ><input type="text" placeholder="Part #" name="part" id="part"></td>
        		<td ><input type="text" placeholder="Description" name="description" id="description"></td>
        		<td><input type="text" placeholder="Price" size="10" name="price" id="price"></td>
        		<td><input type="text" placeholder="Total" name="total" id="total"></td>
      		</tr>
         </table> <input type="button" value="Add More Items" onclick='addRow()'><br /><br />
    
    </body>
    </html>

    i cant seem find to way how to have the automatically created input textbox in the javascript to be the same that i have created in the <tr id='tradd'>? thanks for the help...

  • #2
    Senior Coder
    Join Date
    Sep 2010
    Posts
    1,911
    Thanks
    15
    Thanked 227 Times in 227 Posts
    Code:
    el.type = 'text';
    
    should be 
    
    el.setAttribute('type','text');

  • #3
    New Coder
    Join Date
    Jun 2012
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by DrDOS View Post
    Code:
    el.type = 'text';
    
    should be 
    
    el.setAttribute('type','text');
    i did that, but my input box disappears when i click on the button to add more rows.

  • #4
    Senior Coder
    Join Date
    Sep 2010
    Posts
    1,911
    Thanks
    15
    Thanked 227 Times in 227 Posts
    You need to create new table rows and add td cells to them, or you will just be overwriting the one you just added.

  • #5
    New Coder
    Join Date
    Jun 2012
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts
    im confused now. with my code, when i click on the add more items it will create a new rows and input boxes but the thing is, i want to have the newly created input box have the same attribute here:

    Code:
    </tr>
    		<tr id="trAdd">
        		<td ><input type="text" placeholder="Item" name="item" id="item"></td>
        		<td><input type="number" size="3" name="qty" id="qty"></td>
        		<td><input type="text" placeholder="Manufacturer" name="manuf" id="manuf"></td>
        		<td ><input type="text" placeholder="Part #" name="part" id="part"></td>
        		<td ><input type="text" placeholder="Description" name="description" id="description"></td>
        		<td><input type="text" placeholder="Price" size="10" name="price" id="price"></td>
        		<td><input type="text" placeholder="Total" name="total" id="total"></td>
      		</tr>

  • #6
    New Coder
    Join Date
    Jun 2012
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts
    does anyone know how to solve this problem?

  • #7
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,501
    Thanks
    3
    Thanked 500 Times in 487 Posts
    see changes in red also note that ID names must be unique

    Code:
    <html>
    <head>
    
    <script type="text/javascript">
    
    function addRow()
    	{
    	var tbl = document.getElementById('tableId');
      	var lastRow = tbl.rows.length;
      	// if there's no header row in the table, then iteration = lastRow + 1
       	var row = tbl.insertRow(lastRow);
    
    	// right cell
      	var cellRight = row.insertCell(0);
    	var el = document.createElement('input');
    	el.type = 'text';
      	el.name = 'txtRow';
      	el.id = 'txtRow';
      	el.size = 20;
     	cellRight.appendChild(el);
    
    	var cellRight1 = row.insertCell(1);
    	var el1 = document.createElement('input');
    //	el1.type = 'number';     // this is illegal
    	el1.type = 'text';
      	el1.name = 'txtRow'+lastRow;  // for a unique name
      	el1.id = 'txtRow'+lastRow;    // for a unique id
      	el1.size = 3;
    	cellRight1.appendChild(el1);
    
    	var cellRight2 = row.insertCell(2);
    	var el2 = document.createElement('input');
    	el2.type = 'text';
      	el2.name = 'txtRow';
      	el2.id = 'txtRow';
      	el2.size = 20;
    	cellRight2.appendChild(el2);
    
    	var cellRight3 = row.insertCell(3);
    	var el3 = document.createElement('input');
    	el3.type = 'text';
      	el3.name = 'txtRow';
      	el3.id = 'txtRow';
      	el3.size = 20;
    	cellRight3.appendChild(el3);
    
    	var cellRight4 = row.insertCell(4);
    	var el4 = document.createElement('input');
    	el4.type = 'text';
      	el4.name = 'txtRow';
      	el4.id = 'txtRow';
      	el4.size = 20;
    	cellRight4.appendChild(el4);
    
    	var cellRight5 = row.insertCell(5);
    	var el5 = document.createElement('input');
    	el5.type = 'text';
      	el5.name = 'txtRow';
      	el5.id = 'txtRow';
      	el5.size = 10;
    	cellRight5.appendChild(el5);
    
    	var cellRight6 = row.insertCell(6);
    	var el6 = document.createElement('input');
    	el6.type = 'text';
      	el6.name = 'txtRow';
      	el6.id = 'txtRow';
      	el6.size = 20;
    	cellRight6.appendChild(el6);
    	}
    
    </script>
    </head>
    
    <body>
    	<table id="tableId" width="600" border="1">
    
     		<tr>
        		<td><center>Item:</center></td>
        		<td><center>Qty:</center></td>
        		<td><center>Manuf.:</center></td>
        		<td><center>Part #:</center></td>
        		<td><center>Description:</center></td>
        		<td><center>List Price:</center></td>
        		<td><center>Total:</center></td>
             </tr>
    		<tr id="trAdd">
        		<td ><input type="text" placeholder="Item" name="item" id="item"></td>
        		<td><input type="number" size="3" name="qty" id="qty"></td>
        		<td><input type="text" placeholder="Manufacturer" name="manuf" id="manuf"></td>
        		<td ><input type="text" placeholder="Part #" name="part" id="part"></td>
        		<td ><input type="text" placeholder="Description" name="description" id="description"></td>
        		<td><input type="text" placeholder="Price" size="10" name="price" id="price"></td>
        		<td><input type="text" placeholder="Total" name="total" id="total"></td>
      		</tr>
         </table>
    
         <input type="button" value="Add More Items" onclick='addRow()'><br /><br />
    
    </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/

  • #8
    New Coder
    Join Date
    Jun 2012
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by vwphillips View Post
    see changes in red also note that ID names must be unique

    Code:
    <html>
    <head>
    
    <script type="text/javascript">
    
    function addRow()
    	{
    	var tbl = document.getElementById('tableId');
      	var lastRow = tbl.rows.length;
      	// if there's no header row in the table, then iteration = lastRow + 1
       	var row = tbl.insertRow(lastRow);
    
    	// right cell
      	var cellRight = row.insertCell(0);
    	var el = document.createElement('input');
    	el.type = 'text';
      	el.name = 'txtRow';
      	el.id = 'txtRow';
      	el.size = 20;
     	cellRight.appendChild(el);
    
    	var cellRight1 = row.insertCell(1);
    	var el1 = document.createElement('input');
    //	el1.type = 'number';     // this is illegal
    	el1.type = 'text';
      	el1.name = 'txtRow'+lastRow;  // for a unique name
      	el1.id = 'txtRow'+lastRow;    // for a unique id
      	el1.size = 3;
    	cellRight1.appendChild(el1);
    
    	var cellRight2 = row.insertCell(2);
    	var el2 = document.createElement('input');
    	el2.type = 'text';
      	el2.name = 'txtRow';
      	el2.id = 'txtRow';
      	el2.size = 20;
    	cellRight2.appendChild(el2);
    
    	var cellRight3 = row.insertCell(3);
    	var el3 = document.createElement('input');
    	el3.type = 'text';
      	el3.name = 'txtRow';
      	el3.id = 'txtRow';
      	el3.size = 20;
    	cellRight3.appendChild(el3);
    
    	var cellRight4 = row.insertCell(4);
    	var el4 = document.createElement('input');
    	el4.type = 'text';
      	el4.name = 'txtRow';
      	el4.id = 'txtRow';
      	el4.size = 20;
    	cellRight4.appendChild(el4);
    
    	var cellRight5 = row.insertCell(5);
    	var el5 = document.createElement('input');
    	el5.type = 'text';
      	el5.name = 'txtRow';
      	el5.id = 'txtRow';
      	el5.size = 10;
    	cellRight5.appendChild(el5);
    
    	var cellRight6 = row.insertCell(6);
    	var el6 = document.createElement('input');
    	el6.type = 'text';
      	el6.name = 'txtRow';
      	el6.id = 'txtRow';
      	el6.size = 20;
    	cellRight6.appendChild(el6);
    	}
    
    </script>
    </head>
    
    <body>
    	<table id="tableId" width="600" border="1">
    
     		<tr>
        		<td><center>Item:</center></td>
        		<td><center>Qty:</center></td>
        		<td><center>Manuf.:</center></td>
        		<td><center>Part #:</center></td>
        		<td><center>Description:</center></td>
        		<td><center>List Price:</center></td>
        		<td><center>Total:</center></td>
             </tr>
    		<tr id="trAdd">
        		<td ><input type="text" placeholder="Item" name="item" id="item"></td>
        		<td><input type="number" size="3" name="qty" id="qty"></td>
        		<td><input type="text" placeholder="Manufacturer" name="manuf" id="manuf"></td>
        		<td ><input type="text" placeholder="Part #" name="part" id="part"></td>
        		<td ><input type="text" placeholder="Description" name="description" id="description"></td>
        		<td><input type="text" placeholder="Price" size="10" name="price" id="price"></td>
        		<td><input type="text" placeholder="Total" name="total" id="total"></td>
      		</tr>
         </table>
    
         <input type="button" value="Add More Items" onclick='addRow()'><br /><br />
    
    </body>
    </html>
    why is it illegal to have the type as input type as number?
    thank you for reminding me about the id's but my real problem has not been answered..

    i want to have a javascript that will automatically create additional rows with an input type that has the same attributes in:

    Code:
    <tr id="trAdd">
        		<td ><input type="text" placeholder="Item" name="item" id="item"></td>
        		<td><input type="number" size="3" name="qty" id="qty"></td>
        		<td><input type="text" placeholder="Manufacturer" name="manuf" id="manuf"></td>
        		<td ><input type="text" placeholder="Part #" name="part" id="part"></td>
        		<td ><input type="text" placeholder="Description" name="description" id="description"></td>
        		<td><input type="text" placeholder="Price" size="10" name="price" id="price"></td>
        		<td><input type="text" placeholder="Total" name="total" id="total"></td>
      		</tr>

  • #9
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,121
    Thanks
    75
    Thanked 4,338 Times in 4,304 Posts
    type="number" is only valid in HTML5, but given that you are also using placeholder, which is strictly HTML5, I would assume your code will never work in anything except HTML5, so why not try to use type="number"??

    Question: Why do you use id's for your <form> fields, at all? They have virtually no use if you arentt using <label>s. Just get rid of the ids and use only names. It's okay to have multiple same names.

    If you intend to process the page with PHP, you will need to append [] to all those multiple names, you know. Other server-side systems don't have that silly restriction.
    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.

  • #10
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,121
    Thanks
    75
    Thanked 4,338 Times in 4,304 Posts
    This page worked correctly in Chrome:
    Code:
    <!DOCTYPE html5>
    <html>
    <body>
    <form>
    	<table id="tableId" width="600" border="1">
    
     		<tr>
        		<td><center>Item:</center></td>
        		<td><center>Qty:</center></td>
             </tr>
    		<tr id="trAdd">
        		<td ><input type="text" placeholder="Item" name="item"/></td>
        		<td><input type="number" size="3" name="qty"/></td>
      		</tr>
         </table>
    
         <input type="button" value="Add More Items" onclick='addRow()'><br /><br />
         <input type="submit"/>
    </form>
    <script type="text/javascript">
    function addRow()
    {
        var tbl = document.getElementById("tableId");
        var row = document.createElement("tr");
        var td = document.createElement("td");
        var inp = document.createElement("input");
        inp.placeholder = "Item"
        inp.name = "item"
        td.appendChild(inp);
        row.appendChild(td);
        td = document.createElement("td");
        inp = document.createElement("input");
        inp.type = "number";
        inp.name = "qty"
        inp.size = 3;
        td.appendChild(inp);
        row.appendChild(td);
        tbl.appendChild(row);
    }
    </script>
    </body>
    </html>
    The number fields were not handled properly by Firefox, but at least it allowed them.

    MSIE 9 barfed, as Felgall predicted, on the type="number".

    SO... If you are willing to limit the use of this page to Chrome, it looks like it will work just fine.
    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.

  • #11
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,121
    Thanks
    75
    Thanked 4,338 Times in 4,304 Posts
    Oh...and I added the SUBMIT button so I could submit the <form> to itself and see in the query string that, indeed, all the fields and all the values I entered appear correctly.
    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.

  • Users who have thanked Old Pedant for this post:

    evilbugoy (06-21-2012)

  • #12
    New Coder
    Join Date
    Jun 2012
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts
    thanks a lot Old Pendant!


  •  

    Posting Permissions

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