SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Zealot
    Join Date
    Oct 2007
    Posts
    117
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Textboxes and Table rows on demand

    Hi all,

    I have the following code which creates another row inside and clones the last row.

    My questions are these:
    1) How can I tell how many rows have been created "on demand"
    2) How would I put validation on each input field to ensure that they are not empty

    Cheers

    Code HTML4Strict:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    	<head>
    		<title>Untitled Document</title>
    		<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 ;
    				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();
    			}
    			onload=cloneRow;
    		</script>
    	</head>
    	<body>
    		<form>
    			<table id="mytab">
    				<tr>
    					<td>Foo <input type="text" name="foo_1"></td>
    					<td>Fee <input type="text" name="fee_1"></td>
    				</tr>
    			</table>
    			<br>
    			<input type="button" value="Add a new row" onclick="addRow()">
    		</form>
    	</body>
    </html>

  2. #2
    SitePoint Zealot
    Join Date
    Oct 2007
    Posts
    117
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK I have found that if I do
    Code JavaScript:
    var tbl = document.getElementById('mytab');
    var lastRow = tbl.rows.length;
    alert(lastRow)

    It will give me the number of rows. So I just need to know how I can validate each row to make sure data is entered into them

  3. #3
    SitePoint Evangelist
    Join Date
    Apr 2008
    Location
    Dublin, Ireland
    Posts
    461
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    One way is to use a generic method where you add a class value of say "required" to any input you want to ensure contains a value then have one function that gets all inputs containing this class and alerting the user if it's value's length == 0. Then you can call this function from anywhere. You could also pass a row to the validation function and restrict the check to inputs within this row.


Bookmarks

Posting Permissions

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