clang

So being a bit of a javascript n00b I have some problems. I'm not sure how to get information from javascript (ie: the number of rows that have been entered) to php. I'm also not sure how to actually make things other than simple text be populated by javascript. What I mean is how can I make, basically a whole table (really the rows of a table), be created by javascript, and in such a way that php can extract the information from it. That being said I've used javascript before (both asynchronous and not). And I've found a few of those simple tutorials you've mentioned. But when ever I try to incorporate php form processing into it, it goes over my head. And please excuse my use of the AJAX term. Obviously this doesn't need to make a call back to the server, making is no longer asynchronous.

I figured it would involve ajax, which is fine with me. I just don't know how to set this all up using ajax and php. Any ideas?

I have a form and I need to be able to add multiple rows to it. For example you load the page and it shows you "1) Name:_______ Address:______" *Name and Address are input boxes* Under that would be an "Add" button. When you pressed that button, the page would show you, with out refreshing "1) Name:_______ Address:______ 2) Name:_______ Address:______" It's important that pressing "Add" does not reload the page, in the process having the user lose the information they entered into 1). After that there is an "Enter" button. That sends the information entered by the user to php using post. The information should them be retrievable by php, and php should know how many rows the user entered. If they pressed add alot and entered 10 name's and address, php should loop 10 times. How can I accomplish this? Thanks for the help. If you need any additional information just let me know and I would be happy to supply it. I tried looking through google and through the forums to find something but haven't been able to.

I'm not sure what the forum rules are here for bumping threads. Sorry if this is frowned on, but I still haven't been able to figure this problem out

It opens as a part of the html. It is embedded into the page (again, I know, crappy, but it's not my choice). It is embedded using this code <div id="document" style="display:none;"> <table> <tr> <td class="empty" align="center"> <EMBED src="<?php echo $_SESSION['filePath'];?>" width="1200" height="800" PLUGINSPAGE="http://www.adobe.com/products/acrobat/readstep2.html"></EMBED> </td> </tr> </table> </div> The style is set to display:none, and should change to display:'' once the page and the pdf are loaded. But right now it's just changing to display:'' regardless of the pdf loading.

I apologize, I'm quite new to JavaScript and DOM. I'm going to guess and say no it is not, but I'm not certain. It is in a <div> with an ID, but I doubt that qualifies. Would you mind telling me how I would know, or how to make it a part of DOM? As a note, all the code for this problem I'm having (sans Mootools which is far too many lines to post here) is in my post. But please if I've left out any important information let me know and I'll do my best to include it.

I've got what I think (hope) is a simple problem. I have a page which has a table in it with some information, and below that table a pdf file. First off, before any one says anything, yes I know embedding pdf's suck. But for this task, it's required. Not my choice, I promise. Some of these pdf files take a bit to load (read, long enough for the user to think something broke). So I would like to include an indicator that is displayed during the page load, and is hidden once the entire page, including the pdf, is loaded. This is what I currently have. I'm using the Mootools js framework. The php file which has the pdf in it <?php include 'library/functions.php'; session_start(); $db=opendb($dbhost, $dbuser, $dbpass, $dbname); $header="<script type=\"text/javascript\" src=\"library/mootools-compressed.js\"></script>\n <script type=\"text/javascript\" src=\"library/displayFile.js\"></script>\n "; HTMLheader($db,"Reprint Customer Letter",'10 11','Yes',$header); ?> <div class="title"><a class="likeParent" href="./Search.php">Reprint Customer Letter</a></div> <div id="content"> <?php checkError($db); ?> <table> <tbody> <tr> <th>File Number: </th> <td> <?php echo $_SESSION['fileNumber'];?></td> </tr> <tr> <th>Type of File: </th> <td><?php if($_SESSION['type']==0) { echo "Purchase"; } else { echo "Refinace"; }?></td> </tr> <tr> <th>Last Name: </th> <td> <?php echo $_SESSION['lastName'];?></td> </tr> <tr> <th>First Name: </th> <td><?php echo $_SESSION['firstName'];?></td> </tr> <tr> <th>Street Address: </th> <td><?php echo $_SESSION['street'];?></td> </tr> <tr> <th>City: </th> <td><?php echo $_SESSION['city'];?></td> </tr> <tr> <th>State: </th> <td><?php echo $_SESSION['state'];?></td> </tr> <tr> <th>Zip Code: </th> <td><?php echo $_SESSION['zip'];?></td> </tr> </tbody> </table> <table> <tfoot> <tr> <td colspan="2"><button type="button" onclick="javascript: window.location = './ReprintLetter.php'">New Search</button></td> </tr> </tfoot> </table> <div id="log_res" class="ajax-loading"><!-- spanner --></div> </div> </div> <div id="document" style="display:none;"> <table> <tr> <td class="empty" align="center"> <EMBED src="<?php echo $_SESSION['filePath'];?>" width="1200" height="800" PLUGINSPAGE="http://www.adobe.com/products/acrobat/readstep2.html"></EMBED> </td> </tr> </table> </div> <?php HTMLfooter(); ?> And the Javascript file I created (of course the mootools file is also included) window.addEvent('load', function() { $('log_res').style.display='none'; $('document').style.display=''; }); If you've never used mootools, here is an example of what the load function does (I'm bad with js so this may be just a js function, I don't know). So if my pdf was just a big image, this would work great. But something about being a pdf makes the page think it's loaded, when it's not. Any ideas? I'm open to completely re-doing it too, if that's what it takes.

Ended up using this example. Now everything works great.

Ok first off, I'm sorry. I don't know javascript well enough to trouble shoot things myself all the time, and given that, I'm not totally sure which information I need to give in order to get help with a solution. If there is something that I'm not telling you, that you need to know to help figure out the problem, let me know and I'll put it right up. Phew. Glad thats out of the way. So the problem. I have a form, with 4 drop down options. 3 of those drop downs are filled in when the page is loaded. The final drop down is filled in after you have selected the other three. Once you have selected all 4 of these options, you click on the submit button, and a link appears at the top of your screen. That link is comprised of the options you've selected. If you don't select anything, no link. If you select anything but all three, error. The way I handled this before today was with a php form. As you might have guessed the 4th drop down box is populated using php, and it works just fine. But the problem I was having was that every time you'd hit "Submit" the page would refresh. Sure you would have your link (or your error), but if you wanted to change the options just a little, you'd have to select all 4 all over. So I decided to use more Javascript(/Ajax) to remove the page refresh. All i'm doing is creating a simple link, so taking out the page refresh shouldn't be too hard. Well I've got all the things set up. I based my form off of this page, modifying things to fit my needs. Things work. If I don't select all the options, I get a proper error. The problem is once I select the 4th drop down box, the one which is populated only after the other 3 are selected. When I select it, Firefox tells me it contains no value (or firebug does, firefox just does nothing). But in IE everything works just fine. The link gets created with out a problem. MonthlyReportTesting.php-First is the page it's self. The one which the user sees. <?php include 'library/functions.php'; $db=opendb($dbhost, $dbuser, $dbpass, $dbname); session_start(); $header="<script type=\"text/javascript\" src=\"library/xmlhttp.js\"></script>\n <script type=\"text/javascript\" src=\"library/monthlyReport.js\"></script>\n <script type=\"text/javascript\" src=\"library/util.js\"></script>\n <script type=\"text/javascript\" src=\"library/ajaxCaller.js\"></script>\n "; HTMLheader($db,"Monthly Report",'10','Yes',$header); ?> <div class="title"><a class="likeParent" href="./Admin.php">Monthly Report</a></div> <div id="result"> </div> <div id="resultWait"> <table> <tbody> <tr> <td> <div class="errorYellow"><input type=button value="Please wait..." disabled /></div> </td> </tr> </tbody> </table> </div> <form action="./MonthlyReport.php" method="post" name="form"> <table id="data"> <tbody> <tr> <th>Year</th> <td><select name="Year" id="Year"> <option value="2006" <?php if(date("Y")==2006)echo "SELECTED";?>>2006</option> <option value="2007" <?php if(date("Y")==2007)echo "SELECTED";?>>2007</option> <option value="2008" <?php if(date("Y")==2008)echo "SELECTED";?>>2008</option> <option value="2009" <?php if(date("Y")==2009)echo "SELECTED";?>>2009</option> <option value="2010" <?php if(date("Y")==2010)echo "SELECTED";?>>2010</option> <option value="2011" <?php if(date("Y")==2011)echo "SELECTED";?>>2011</option> </select></td> </tr> <tr> <th>Month</th> <?php /* Note: I am checking to see which month we are currently in, and selecting the previous month. So if I'm in february, january will be selected. */ ?> <td><select name="Month" id="Month"> <option value="01" <?php if(date("m")==02)echo "SELECTED";?>>January</option> <option value="02" <?php if(date("m")==03)echo "SELECTED";?>>February</option> <option value="03" <?php if(date("m")==04)echo "SELECTED";?>>March</option> <option value="04" <?php if(date("m")==05)echo "SELECTED";?>>April</option> <option value="05" <?php if(date("m")==06)echo "SELECTED";?>>May</option> <option value="06" <?php if(date("m")==07)echo "SELECTED";?>>June</option> <option value="07" <?php if(date("m")==08)echo "SELECTED";?>>July</option> <option value="08" <?php if(date("m")==09)echo "SELECTED";?>>August</option> <option value="09" <?php if(date("m")==10)echo "SELECTED";?>>September</option> <option value="10" <?php if(date("m")==11)echo "SELECTED";?>>October</option> <option value="11" <?php if(date("m")==12)echo "SELECTED";?>>November</option> <option value="12" <?php if(date("m")==01)echo "SELECTED";?>>December</option> </select></td> </tr> <tr> <th>Company</th> <td><select name="Company" onchange="FillBranches(this.value)" id="Company"> <option value="Null" SELECTED>Please select a company</option> <?php $result=listCompanies($db); for($a=0; $a<$result->num_rows;$a++) { $row = $result->fetch_assoc(); echo "<option value=\"".stripslashes($row['Abbreviation'])."\">".stripslashes($row['Name'])."</option>\n"; } ?> </select></td> </tr> <tr> <th>Branch</th> <td><span id="selectBranch"><select name="Branch" id="Branch"> <option value="-1">First select a company</option> </select></span> </td> </tr> </tbody> <tfoot> <tr> <td colspan="2"> <button type="button" id="createButton">Create Report</button> </td> </tr> </tfoot> </table> </form> <?php HTMLfooter(); ?> FillMonthlyReport.php-This is the file which creates either the error or the link, and is passed back to MonthlyReportTesting.php <?php include './library/functions.php'; $db=opendb($dbhost, $dbuser, $dbpass, $dbname); sleep(1); if($_GET['Year']<=date("Y"))//Checks to make sure we don't select a year that hasn't happened yet { if($_GET['Month']<=date("m")||$_GET['Year']<date("Y"))//Checks to see if the month selected has occured. If the year is one previous to the current year, then all months have occured. { if($_GET['Company']!="Null") { if($_GET['Branch']!="-1") { $y=$_GET['Year']; $m=$_GET['Month']; $b=$_GET['Branch']; $c=$_GET['Company']; $url="./CreateReport.php?year=$y&month=$m&company=$c&branch=$b"; ?> <table> <tbody> <tr> <td> <div class="errorGreen"><input type=button value="Click here for the report" onClick="javascript:popUp('<?php echo $url;?>')" /></div> </td> </tr> </tbody> </table> <?php } else { setError(113);//Please select a branch } } else { setError(112);//Please select a company } } else { setError(111);//No information for that month exists. Please select again } } else { setError(110);//No information for that year exists. Please select again. } checkError($db); ?> MonthlyReport.js This contains the javascript which is loaded once the Create Report button is pressed. window.onload = function() { $("result").style.display = "none"; $("resultWait").style.display = "none"; $("createButton").onclick = function() { submitSum(); } } function submitSum() { $("resultWait").style.display = ''; self.$("result").innerHTML = ""; var definedFigures = { Year: $("Year").value, Month: $("Month").value, Branch: $("Branch").value, Company: $("Company").value } ajaxCaller.get("fillMonthlyReport.php", definedFigures, onSumResponse, false, null); } function onSumResponse(text, headers, callingContext) { $("resultWait").style.display = "none"; self.$("result").innerHTML = text; $("result").style.display=''; } util.js-This file I got from the link above. I haven't modified it var util = { shouldDebug: false, // Note: Will fail in pathological cases (where the members contain // strings similar to describe() result). membersEqual: function(array1, array2) { return util.describe(array1)==util.describe(array2); }, describe: function(obj) { if (obj==null) { return null; } switch(typeof(obj)) { case 'object': { var message = ""; for (key in obj) { message += ", [" + key + "]: [" + obj[key] + "]"; } if (message.length > 0) { message = message.substring(2); // chomp initial ', ' } return message; } default: return "" + obj; } }, debug: function(message) { if (this.shouldDebug) { alert("AjaxJS Message:\n\n" + message); } }, error: function(message) { if (this.shouldDebug) { alert("AjaxJS ERROR:\n\n" + message); } }, trim: function(str) { return str.replace(/(^\s+|\s+$)/g,''); }, strip: function(str) { return str.replace(/\s+/, ""); } } function $() { var elements = new Array(); for (var i = 0; i < arguments.length; i++) { var element = arguments[i]; if (typeof element == 'string') { if (document.getElementById) { element = document.getElementById(element); } else if (document.all) { element = document.all[element]; } } elements.push(element); } if (arguments.length == 1 && elements.length > 0) { return elements[0]; } else { return elements; } } function $C(elType) { return document.createElement(elType); } // From prototype library. Try.these(f1, f2, f3); var Try = { these: function() { var returnValue; for (var i = 0; i<arguments.length; i++) { var lambda = arguments[i]; try { returnValue = lambda(); break; } catch (e) {} } return returnValue; } } function getElementsByClassName(classname) { var a = []; var re = new RegExp('\\b' + classname + '\\b'); var els = document.getElementsByTagName("*"); for(var i=0,j=els.length; i<j; i++) if(re.test(els[i].className))a.push(els[i]); return a; } function extractIFrameBody(iFrameEl) { var doc = null; if (iFrameEl.contentDocument) { // For NS6 doc = iFrameEl.contentDocument; } else if (iFrameEl.contentWindow) { // For IE5.5 and IE6 doc = iFrameEl.contentWindow.document; } else if (iFrameEl.document) { // For IE5 doc = iFrameEl.document; } else { alert("Error: could not find sumiFrame document"); return null; } return doc.body; } /* function getElementsByClassName(needle) { var xpathResult = document.evaluate('//*[@class = needle]', document, null, 0, null); var outArray = new Array(); while ((outArray[outArray.length] = xpathResult.iterateNext())) { } return outArray; } */ /* function acceptNode(node) { if (node.hasAttribute("class")) { var c = " " + node.className + " "; if (c.indexOf(" " + needle + " ") != -1) return NodeFilter.FILTER_ACCEPT; } return NodeFilter.FILTER_SKIP; } var treeWalker = document.createTreeWalker(document.documentElement, NodeFilter.SHOW_ELEMENT, acceptNode, true); var outArray = new Array(); if (treeWalker) { var node = treeWalker.nextNode(); while (node) { outArray.push(node); node = treeWalker.nextNode(); } } return outArray; } */ /////////////////////////////////////////////////////////////////////////////// // Used for pattern-specific demos. /////////////////////////////////////////////////////////////////////////////// var DELAY = 1000; var steps = 0; function andThen(action) { var delayTime = (++steps * DELAY); setTimeout(action, delayTime); } function log(message) { $("log").innerHTML += message + "<br/>"; } function createXMLHttpRequest() { try { return new ActiveXObject("Msxml2.XMLHTTP"); } catch(e) {} try { return new ActiveXObject("Microsoft.XMLHTTP"); } catch(e) {} try { return new XMLHttpRequest(); } catch(e) {} alert("XMLHttpRequest not supported"); return null; } ajaxCaller.js-Same goes for this file var ajaxCaller = { shouldDebug: false, shouldEscapeVars: false, shouldMakeHeaderMap: true, calls : new Array(), pendingResponseCount : 0, /************************************************************************** PUBLIC METHODS *************************************************************************/ getXML: function(url, callbackFunction) { this.get(url, null, callbackFunction, true, null); }, getPlainText: function(url, callbackFunction) { this.get(url, null, callbackFunction, false, null); }, postForPlainText: function(url, vars, callbackFunction) { this.postVars(url, vars, null, callbackFunction, false, null, "POST", null, null, null); }, postForXML: function(url, vars, callbackFunction) { this.postVars(url, vars, null, callbackFunction, true, null, "POST", null, null, null); }, get: function(url, urlVars, callbackFunction, expectingXML, callingContext) { this._callServer(url, urlVars, callbackFunction, expectingXML, callingContext, "GET", null, null, null); }, postVars: function(url, bodyVars, optionalURLVars, callbackFunction, expectingXML, callingContext) { this._callServer(url, optionalURLVars, callbackFunction, expectingXML, callingContext, "POST", bodyVars, null, null); }, postBody: function(url, optionalURLVars, callbackFunction, expectingXML, callingContext, bodyType, body) { this._callServer(url, optionalURLVars, callbackFunction, expectingXML, callingContext, "POST", null, bodyType, body); }, putBody: function(url, optionalURLVars, callbackFunction, expectingXML, callingContext, bodyType, body) { this._callServer(url, optionalURLVars, callbackFunction, expectingXML, callingContext, "PUT", null, bodyType, body); }, options: function(url, optionalURLVars, callbackFunction, expectingXML, callingContext, bodyType, body) { this._callServer(url, optionalURLVars, callbackFunction, expectingXML, callingContext, "OPTIONS", null, bodyType, body); }, trace: function(url, optionalURLVars, callbackFunction, expectingXML, callingContext, bodyType, body) { this._debug("trace"); this._callServer(url, optionalURLVars, callbackFunction, expectingXML, callingContext, "TRACE", null, bodyType, body); }, deleteIt: function(url, urlVars, callbackFunction, expectingXML, callingContext) { this._callServer(url, urlVars, callbackFunction, expectingXML, callingContext, "DELETE", null, null, null); }, head: function(url, urlVars, callbackFunction, expectingXML, callingContext) { this._callServer(url, urlVars, callbackFunction, expectingXML, callingContext, "HEAD", null, null, null); }, /************************************************************************** PRIVATE METHODS *************************************************************************/ _callServer: function(url, urlVars, callbackFunction, expectingXML, callingContext, requestMethod, bodyVars, explicitBodyType, explicitBody) { if (urlVars==null) { urlVars = new Array(); } this._debug("_callServer() called. About to request URL\n" + "call key: [" + this.calls.length + "]\n" + "url: [" + url + "]\n" + "callback function: [" + callbackFunction + "]\n" + "treat response as xml?: [" + expectingXML + "]\n" + "Request method?: [" + requestMethod + "]\n" + "calling context: [" + callingContext + "]\n" + "explicit body type: [" + explicitBodyType + "]\n" + "explicit body: [" + explicitBody + "]\n" + "urlVars: [" + util.describe(urlVars) + "]\n" + "bodyVars: [" + util.describe(bodyVars) + "]" ); var xReq = this._createXMLHttpRequest(); xReq.onreadystatechange = function() { ajaxCaller._onResponseStateChange(call); } var call = {xReq: xReq, callbackFunction: callbackFunction, expectingXML: expectingXML, callingContext: callingContext, url: url}; if (urlVars!=null) { var urlVarsString = this._createHTTPVarSpec(urlVars); if (urlVarsString.length > 0) { // TODO check if appending with & instead url += "?" + urlVarsString; } } xReq.open(requestMethod, url, true); if ( requestMethod=="GET" || requestMethod=="HEAD" || requestMethod=="DELETE") { this._debug("Body-less request to URL " + url); xReq.send(null); return; } if ( requestMethod=="POST" || requestMethod=="PUT" || requestMethod=="OPTIONS" || requestMethod=="TRACE") { bodyType = null; body = null; if (explicitBodyType==null) { // It's a form bodyType = 'application/x-www-form-urlencoded; charset=UTF-8'; body = this._createHTTPVarSpec(bodyVars); } else { bodyType = explicitBodyType; body = explicitBody; } this._debug("Content-Type: [" + bodyType + "]\nBody: [" + body + "]."); xReq.setRequestHeader('Content-Type', bodyType); xReq.send(body); return; } this._debug("ERROR: Unknown Request Method: " + requestMethod); }, // The callback of xmlHttpRequest is a dynamically-generated function which // immediately calls this function. _onResponseStateChange: function(call) { xReq = call.xReq; if (xReq.readyState < 4) { //Still waiting return; } if (xReq.readyState == 4) { //Transmit to actual callback this._debug("Call " + util.describe(call) + " with context [" + call.callingContext+"]" + " to " + call.url + " has returned."); callbackFunction = call.callbackFunction; if (!callbackFunction) { // Maybe still loading, e.g. in another JS file setTimeout(function() { _onResponseStateChange(call); }, 100); } var content = call.expectingXML ? xReq.responseXML : xReq.responseText; responseHeaders = xReq.getAllResponseHeaders(); headersForCaller = this.shouldMakeHeaderMap ? this._createHeaderMap(responseHeaders) : responseHeaders; callbackFunction(content, headersForCaller, call.callingContext); } call = null; // Technically the responsibility of GC this.pendingResponseCount--; }, // Browser-agnostic factory function _createXMLHttpRequest: function() { if (window.XMLHttpRequest) { return new XMLHttpRequest(); } else if (window.ActiveXObject) { return new ActiveXObject('Microsoft.XMLHTTP') } else { _error("Could not create XMLHttpRequest on this browser"); return null; } }, _createHTTPVarSpec: function(vars) { var varsString = ""; for( key in vars ) { var value = vars[key]; if (this.shouldEscapeVars) { escapePlusRE = new RegExp("\\\+"); value = value.replace(escapePlusRE, "%2B"); } varsString += '&' + key + '=' + value; } if (varsString.length > 0) { varsString = varsString.substring(1); // chomp initial '&' } this._debug("Built var String: " + varsString) return varsString; }, /* Creates associative array from header type to header */ _createHeaderMap: function(headersText) { extractedHeaders = headersText.split("\n"); delete extractedHeaders[extractedHeaders.length]; // Del blank line at end headerMap = new Array(); for (i=0; i<extractedHeaders.length-2; i++) { head = extractedHeaders[i]; fieldNameEnding = head.indexOf(":"); field = head.substring(0, fieldNameEnding); value = head.substring(fieldNameEnding + 2, head.length); value = value.replace(/\s$/, ""); headerMap[field] = value; } return headerMap; }, _debug: function(message) { if (this.shouldDebug) { alert("AjaxJS Message:\n\n" + message); } }, _error: function(message) { if (this.shouldDebug) { alert("AjaxJS ERROR:\n\n" + message); } } }; Sorry for the length. But if anyone can help me understand why this is working in IE and not FireFox, I would greatly appreciate it.

I've got a page I'd like to print out. Right now all I have to do that is a button <input type="button" onClick="javascript:window.print()" value="Print"> I'd like to change two things, if possible. First, when the page prints out, is there any way to hide the "Print button"? Second, right now the page is printing without any of my CSS information coming up. Meaning it has no style and looks terrible. Any way to have the style's be included in the print out?

Ha! Got it. I guess <button> has the default property of submit. I added the line type="button" to it's properties and now all is well. So the final code is <button type="button" onclick="javascript:toggleEdit('editButtons',this)">Edit</button> Thanks for the help!

It looks like pressing the following button calls the form action <button onclick="javascript:toggleEdit('editButtons',this)">Edit</button> Since the form is posting to it's self it's reloading. <form action="./Verify.php" method="post"> But the button is not a submit button, so I'm not sure why it's calling the form action. Ideas?

The full code has a large chunk of php in it. I've set up a separate test page to isolate the problem and I've narrowed down the problem to something with the php on this page specifically. What I mean to say is, those functions and includes at the start of the document don't seem to be the problem, since I've tried the same things on another page, that I don't get this bug. I've attached the file instead of posting because of the length. Thanks for the help. This one has me stumped. [attachment deleted by admin]

It's working fine in IE for me but not FF. I'm not sure what else on my page could be calling for a reload when that function is called.

So I've got a <tr> in my page who's display property is set to none by default. I've also got a function that changes that property to '' when a button is clicked, so that the element becomes visible. When I click the button, the hidden table row becomes visible for a second, then goes back to hidden. I stuck an alert at the bottom of the page to tell me when the page loads, and it's loading right after I click my button, which makes sense that my table row is going back to the default value of being hidden. But there is nothing in my functions that calls for a reload of the page. Here's the code for the table row and the button that you click <table align="center"> <tfoot> <tr style='display:none;' id="editButtons"> <td><button></button></td> <td><button></button></td> <td><button></button></td> </tr> <tr> <td colspan="2" align="center"> <input type="submit" name="Ok" value="Ok" > </td> <td colspan="1" align="center"> <button onclick="javascript:toggleEdit('editButtons',this)">Edit</button> </td> </tr> </tfoot> </table> And the function it calls function toggleEdit(name,button){ var me=getDOM(name); if(me.style.display=='none') { me.style.display=''; button.innerHTML="Cancel Edit"; } else { me.style.display='none'; button.innerHTML="Edit"; } } function getDOM(objectname){ if (document.all) return document.all[objectname]; else return document.getElementById(objectname); } Any ideas on whats wrong?