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 Coder
    Join Date
    Oct 2007
    Location
    Washington
    Posts
    86
    Thanks
    3
    Thanked 2 Times in 2 Posts

    calculation for dynamically added textboxes

    Ok, I've been playing around with this code and I'm stumped
    I've used: Add rows and delete specific rows dynamically from an HTML table
    from mredkj.com

    here is test.php:
    Code:
    <html>
    <head>
    
    <script type="text/javascript" src="javascripts/test.js"></script>
    </head>
    <body>
    
    <form action="" method="get" name="form0">
    <p>
    <input type="button" value="Add" onclick="addRowToTable();" />
    <input type="button" value="Insert [I]" onclick="insertRowToTable();" />
    <input type="button" value="Delete [D]" onclick="deleteChecked();" />
    <input type="button" value="Submit" onclick="openInNewWindow(this.form);" />
    </p>
    <table border="0" cellspacing="0" id="tblSample">
      <thead>
      <tr>
        <th colspan="5">Sample table</th>
      </tr>
      <tr>
        <th>#</th><th>Input Text</th><th>Add</th><th>Delete</th><th>D</th><th>I</th>
      </tr>
      </thead>
      <tbody></tbody>
    </table>
    <input type="text" name="SUM" value="0" onfocus="if(this.value=='0')this.value='';" onblur="if(this.value=='')this.value='0';" readonly size="4">
    </form>
    <a href="javascript:if (typeof(window.document.body.outerHTML) != 'undefined'){'<xmp>'+window.document.body.outerHTML+'</xmp>'} else if (typeof(document.getElementsByTagName('html')[0].innerHTML) != 'undefined'){ '<xmp>'+document.getElementsByTagName('html')[0].innerHTML+'</xmp>'} else if (typeof(window.document.documentElement.outerHTML) != 'undefined'){ '<xmp>'+window.document.documentElement.outerHTML+'</xmp>'} else { alert('Your browser does not support this.') }">View Source!</a>
    </body>
    </html>
    and here is test.js:
    Code:
    var a = 'a'; // this is being set via script
    var RADIO_NAME = 'totallyrad'; // this is being set via script
    var TABLE_NAME = 'tblSample'; // this should be named in the HTML
    var ROW_BASE = 1; // first number (for display)
    var hasLoaded = false;
    
    window.onload=fillInRows;
    
    function fillInRows()
    {
    	hasLoaded = true;
    	addRowToTable();
    	addRowToTable();
    }
    
    // CONFIG:
    // myRowObject is an object for storing information about the table rows
    function myRowObject(one, two, three, four)
    {
    	this.one = one; // text object
    	this.two = two; // input text object
    	this.three = three; // input checkbox object
    	this.four = four; // input radio object
    }
    
    /*
     * insertRowToTable
     * Insert and reorder
     */
    function insertRowToTable()
    {
    	if (hasLoaded) {
    		var tbl = document.getElementById(TABLE_NAME);
    		var rowToInsertAt = tbl.tBodies[0].rows.length;
    		for (var i=0; i<tbl.tBodies[0].rows.length; i++) {
    			if (tbl.tBodies[0].rows[i].myRow && tbl.tBodies[0].rows[i].myRow.four.getAttribute('type') == 'radio' && tbl.tBodies[0].rows[i].myRow.four.checked) {
    				rowToInsertAt = i;
    				break;
    			}
    		}
    		addRowToTable(rowToInsertAt);
    		reorderRows(tbl, rowToInsertAt);
    	}
    }
    
    function Calc(){
        var frm = document.form0;
        var total=0;
    
        if (!frm.ary) frm.ary=[frm.a1_2];
        for (var xyz=0;xyz<frm.ary.length;xyz++){
        if (frm.ary[xyz].value.length>0&&!isNaN(frm.ary[xyz].value)) total+=frm.ary[xyz].value*1;
        }
        frm.SUM.value=total;
        }
    
    /*
     * addRowToTable
     * Inserts at row 'num', or appends to the end if no arguments are passed in. Don't pass in empty strings.
     */
    function addRowToTable(num)
    {
    	if (hasLoaded) {
    		var tbl = document.getElementById(TABLE_NAME);
    		var nextRow = tbl.tBodies[0].rows.length;
    		var iteration = nextRow + ROW_BASE;
    		if (num == null) { 
    			num = nextRow;
    		} else {
    			iteration = num + ROW_BASE;
    		}
    		
    		// add the row
    		var row = tbl.tBodies[0].insertRow(num);
    		
    		// CONFIG: requires classes named classy0 and classy1
    		row.className = 'classy' + (iteration % 2);
    	
    		// CONFIG: This whole section can be configured
    		
    		// cell 0 - text
    		var cell0 = row.insertCell(0);
    		var textNode = document.createTextNode(iteration);
    		cell0.appendChild(textNode);
    		
    		// cell 1 - input text
    		var cell1 = row.insertCell(1);
    		var txtInp1 = document.createElement('input');
    		txtInp1.setAttribute('type', 'text');
    		txtInp1.setAttribute('name', 'a' + iteration + '_1');
    		txtInp1.setAttribute('size', '40');
    		txtInp1.setAttribute('value', iteration); // iteration included for debug purposes
    		cell1.appendChild(txtInp1);
    
        var cell1a = row.insertCell(2);
        var txtInp2 = document.createElement('input');
        txtInp2.type = 'text';
        txtInp2.value = '';
        txtInp2.setAttribute('name', 'a' + iteration + '_2');
        txtInp2.size = 4;
        txtInp2.setAttribute("onChange", "Calc()");
        txtInp2.setAttribute("onBlur", "Calc()");
        txtInp2.setAttribute("onFocus", "Calc()");
        txtInp2.setAttribute("onClick", "Calc()");
        txtInp2.setAttribute("onKeydown", "Calc()");
        txtInp2.setAttribute("onKeyup", "Calc()");
        cell1a.appendChild(txtInp2);
    		
    		// cell 2 - input button
    		var cell2 = row.insertCell(3);
    		var btnEl = document.createElement('input');
    		btnEl.setAttribute('type', 'button');
    		btnEl.setAttribute('value', 'Delete');
    		btnEl.onclick = function () {deleteCurrentRow(this)};
    		cell2.appendChild(btnEl);
    		
    		// cell 3 - input checkbox
    		var cell3 = row.insertCell(4);
    		var cbEl = document.createElement('input');
    		cbEl.setAttribute('type', 'checkbox');
    		cell3.appendChild(cbEl);
    		
    		// cell 4 - input radio
    		var cell4 = row.insertCell(5);
    		var raEl;
    		try {
    			raEl = document.createElement('<input type="radio" name="' + RADIO_NAME + '" value="' + iteration + '">');
    			var failIfNotIE = raEl.name.length;
    		} catch(ex) {
    			raEl = document.createElement('input');
    			raEl.setAttribute('type', 'radio');
    			raEl.setAttribute('name', RADIO_NAME);
    			raEl.setAttribute('value', iteration);
    		}
    		cell4.appendChild(raEl);
    		
    		// Pass in the elements you want to reference later
    		// Store the myRow object in each row
    		row.myRow = new myRowObject(textNode, txtInp1, txtInp2, cbEl, raEl);
    	}
    }
    
    // CONFIG: this entire function is affected by myRowObject settings
    // If there isn't a checkbox in your row, then this function can't be used.
    function deleteChecked()
    {
    	if (hasLoaded) {
    		var checkedObjArray = new Array();
    		var cCount = 0;
    	
    		var tbl = document.getElementById(TABLE_NAME);
    		for (var i=0; i<tbl.tBodies[0].rows.length; i++) {
    			if (tbl.tBodies[0].rows[i].myRow && tbl.tBodies[0].rows[i].myRow.three.getAttribute('type') == 'checkbox' && tbl.tBodies[0].rows[i].myRow.three.checked) {
    				checkedObjArray[cCount] = tbl.tBodies[0].rows[i];
    				cCount++;
    			}
    		}
    		if (checkedObjArray.length > 0) {
    			var rIndex = checkedObjArray[0].sectionRowIndex;
    			deleteRows(checkedObjArray);
    			reorderRows(tbl, rIndex);
    		}
    	}
    }
    
    // If there isn't an element with an onclick event in your row, then this function can't be used.
    function deleteCurrentRow(obj)
    {
    	if (hasLoaded) {
    		var delRow = obj.parentNode.parentNode;
    		var tbl = delRow.parentNode.parentNode;
    		var rIndex = delRow.sectionRowIndex;
    		var rowArray = new Array(delRow);
    		deleteRows(rowArray);
    		reorderRows(tbl, rIndex);
    	}
    }
    
    function reorderRows(tbl, startingIndex)
    {
    	if (hasLoaded) {
    		if (tbl.tBodies[0].rows[startingIndex]) {
    			var count = startingIndex + ROW_BASE;
    			for (var i=startingIndex; i<tbl.tBodies[0].rows.length; i++) {
    			
    				// CONFIG: next line is affected by myRowObject settings
    				tbl.tBodies[0].rows[i].myRow.one.data = count; // text
    				
    				// CONFIG: next line is affected by myRowObject settings
    				tbl.tBodies[0].rows[i].myRow.two.name = a + count; // input text
    				
    				// CONFIG: next line is affected by myRowObject settings
    				var tempVal = tbl.tBodies[0].rows[i].myRow.two.value.split(' '); // for debug purposes
    				tbl.tBodies[0].rows[i].myRow.two.value = count + ' was' + tempVal[0]; // for debug purposes
    				
    				// CONFIG: next line is affected by myRowObject settings
    				tbl.tBodies[0].rows[i].myRow.four.value = count; // input radio
    				
    				// CONFIG: requires class named classy0 and classy1
    				tbl.tBodies[0].rows[i].className = 'classy' + (count % 2);
    				
    				count++;
    			}
    		}
    	}
    }
    
    function deleteRows(rowObjArray)
    {
    	if (hasLoaded) {
    		for (var i=0; i<rowObjArray.length; i++) {
    			var rIndex = rowObjArray[i].sectionRowIndex;
    			rowObjArray[i].parentNode.deleteRow(rIndex);
    		}
    	}
    }
    
    function openInNewWindow(frm)
    {
    	// open a blank window
    	var aWindow = window.open('', 'TableAddRow2NewWindow',
    	'scrollbars=yes,menubar=yes,resizable=yes,toolbar=no,width=400,height=400');
    	
    	// set the target to the blank window
    	frm.target = 'TableAddRow2NewWindow';
    	
    	// submit
    	frm.submit();
    }
    Its the Calc() script thats not working, I want to add up whatever is in the second textbox column as more lines are added and to total in the SUM textbox.

    Anyone care to shed some light on this one....Im stumped
    "The one closer to the truth is the one still learning"

  • #2
    Banned
    Join Date
    Jul 2008
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    2

    Cheers, good idea 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
    •