Help with Javascript to write to MySQL and increase columns

[SA Rob]

Hi folks,I have found this script which once ammended would work well for a cause that I have.I would like to use it for online scoring of a golf event.

• Could someone please look at it and let me know if it can be improved on so as to have ±28 columns?
• Can this information be subitted to MySQL ?
• Can the table when ammended remove information form the MySQL database?

I look forward to your replies

<script language="javascript" type="text/javascript"><!-- Original: Bob Simpson ([email="webmaster@maryjanebrown.net"]webmaster@maryjanebrown.net[/email]) --><!-- Web Site: [url="http://maryjanebrown.net/webmaster"]http://maryjanebrown.net/webmaster[/url] -->/* Visit [url="http://www.yaldex.com/"]http://www.yaldex.com/[/url] for full source codeand get more free JavaScript, CSS and DHTML scripts! */<!-- Beginfunction VER5_Check() {var b = navigator.appName;if (b == "Netscape") this.b = "NS";else if (b == "Microsoft Internet Explorer") this.b = "IE";this.v = parseInt(navigator.appVersion);this.IE5 = (navigator.userAgent.indexOf('MSIE') > 0);this.NS5 = (this.b == "NS" && this.v == 5);this.VER5 = (this.IE5 || this.NS5);}is = new VER5_Check();if(! is.VER5) {alert("Internet Explorer 5.0 or Netscape NS6 needed to view this site.");document.write('<meta http-equiv="refresh" content="0; url=index.shtml">');}// End --></script><script language="javascript" type="text/javascript"><!-- Begindocument.write('<center>');document.write('<form name="form0">');document.write('<input type="text" name="row" size=6 value="">');document.write('<input type="text" name="name" size=24 value="">');document.write('<input type="text" name="address" size=24 value="">');document.write('<input type="text" name="city" size=24 value="">');document.write('</form>');document.write('</center>');var _id;var _ff = 0;var _rawId = null;var _pages = 0;var _chgFlag = null;_cellZero = null;var _tableStyle="border:0;align:center;width:600";var _headerData = new Array("No.","Name","Address","City");var _tableData = new Array("1","Jones, Tom","110 James Street","Tacoma,WA","2","Cummings","123 Cray St.","Vashon, WA","3","Simpson","Javascript St.","Vashon, WA","4","Gates","Microsoft Way","Redmond, WA","5","Paul Allen","Defunct Kingdome","Seattle, WA","6","Jane Allen","King Street","Seattle, WA","7","Henry Bacon","Elliot Ave.","Seattle, WA","8","John Doe","Ballard","Seattle, WA","9","Mr. Floppy","Smith Tower","Seattle, WA","10","Jerry Allen","Everett Ave.","Seattle, WA","11","June Allen","King Street","Bellevue, WA","12","George Bacon","Elliot Ave.","Seattle, WA","13","Diane Doe","Ballard","Seattle, WA","14","Mrs. Floppy","Smith Tower","Seattle, WA","15","Jeff Allen","Everett Ave.","Seattle, WA","16","Mrs. Avery","Smith Tower","Seattle, WA","17","Henry Aldrich","Everett Ave.","Seattle, WA","18","Tom Turkey","Smith Tower","Seattle, WA","19","John Nerd","Everett Ave.","Seattle, WA");// --></script><script type="text/javascript" language="Javascript1.2"><!-- // Beginfunction build_W3C_body() {docBody = document.getElementsByTagName("body").item(0);mySite = document.createElement("DIV");mySite.id = "_mysite";mySite.style.fontWeight="bold";mySite.setAttribute("align","center");buildDataTable(docBody, _tableData, _tableStyle, _headerData);buttonDiv = document.createElement("DIV");buttonDiv.setAttribute("align","center");msgDiv = document.createElement("DIV");msgDiv.id="message";msgDiv.style.width=600;msgDiv.style.height=25;msgDiv.style.backgroundColor = "maroon";msgDiv.style.color = "white";msgDiv.style.fontWeight = "bold";msgDiv.appendChild(document.createTextNode("Click cell in upper table to get row values!"));buttonDiv.appendChild(msgDiv);style = "width:205px;height:24px;fontSize:8pt;fontWeight:bold;backgroundColor:d5d5d5;";makeButton("update",buttonDiv,style,"UPDATE TABLE");style = "visibility:visible;width:204px;height:24px;fontSize:8pt;fontWeight:bold;backgroundColor:d5d5d5";makeButton("tran",buttonDiv,style,"TRANSMIT CHANGES");style = "width:96;height:24px;fontSize:8pt;fontWeight:bold;backgroundColor:d5d5d5";makeButton("up",buttonDiv,style,"SCROLL-UP");style = "width:96px;height:24px;fontSize:8pt;fontWeight:bold;backgroundColor:d5d5d5";makeButton("down",buttonDiv,style,"SCROLL-DN");docBody.appendChild(buttonDiv);}var _butMsg = new Array_butMsg[0] = "Click cell in upper table to get row values !";_butMsg[1] = "Add Custom Messages!";_butMsg[2] = "Edit in input boxes above.";_butMsg[3] = "Add Custom Messages!";_butMsg[4] = "Click update table to update & create tran table.";_butMsg[5] = "Add Custom Messages!";_butMsg[6] = "Click update table to update & create tran table.";_butMsg[7] = "Add Custom Messages!";_butMsg[8] = "Scroll buttons scroll up or down 5 rows.";_butMsg[9] = "Add Custom Messages!";_butMsg[10] = "Transmit button not implemented at present.";_butMsg[11] = "One row in tran table represents all changes to that row.";var _z=0;var _twoCnt = 0;var _butFlg = 0;function buttonMsg() {if(_butFlg == 0) {document.getElementById("message").style.visibility = "visible";document.getElementById("message").style.backgroundColor = "maroon";document.getElementById("message").style.color = "white";if(_twoCnt == 0) {document.getElementById("message").firstChild.nodeValue = _butMsg[_z++];}_twoCnt++if(_twoCnt == 3)_twoCnt = 0;if(_z == _butMsg.length)_z = 0;}}document.onmousedown = buttonDown;document.onmouseover = mouseOver;document.onmouseout = mouseOut;function mouseOver(e) {tmp = (is.NS5) ? e.target.getAttribute("id") : event.srcElement.id;if(tmp.substring(0,1) == "_" || ! tmp) return;_butFlg = 1;upButton = document.getElementById("message")if(tmp == "tran")buttonColor(tmp,"cdfff6","blue",upButton,"Transmit lower table to server - for test purposes only at present.");if(tmp == "update")buttonColor(tmp,"cdfff6","blue",upButton,"Update upper & lower tables.");if(tmp == "up")buttonColor(tmp,"cdfff6","blue",upButton,"Scroll table up 5 rows.");if(tmp == "down")buttonColor(tmp,"cdfff6","blue",upButton,"Scroll table down 5 rows.");if(tmp == "javaX")buttonColor(tmp,"blue","white",upButton,"Go to good Javascript source.");if(tmp == "siteX")buttonColor(tmp,"blue","white",upButton,"Go to Bob Simpson's Javascript site");if(tmp == "mailX")buttonColor(tmp,"blue","white",upButton,"E-mail author if any questions");if(tmp == "sourceX")buttonColor(tmp,"blue","white",upButton,"Source for this page (dom_table.zip)");if(tmp == "tranTable") {upButton.style.backgroundColor = "red";upButton.style.color = "white";upButton.firstChild.nodeValue = "Changes not allowed here - make changes in upper table !"}if(parseInt(tmp) >= 0) {if(parseInt(tmp.substring(tmp.length-1,tmp.length)) == 0) {buttonColor(tmp,"red","white",upButton,"Changes to row number not allowed !");table.style.backgroundColor="red";}else {buttonColor(tmp,"black","white",upButton,"Click cell to get row values - edit in upper input boxes.");table.style.backgroundColor = "black";}}if(tmp.substring(tmp.length-1,tmp.length) == "X") {document.getElementById(tmp).style.color = "red";table.style.backgroundColor = "blue";}}function mouseOut(e) {table.style.backgroundColor="maroon";tmp = (is.NS5) ? e.target.getAttribute("id") : event.srcElement.id;if(tmp.substring(0,1) == "_" || ! tmp) return;_butFlg = 0;document.getElementById("message").style.color = "white";document.getElementById("message").style.backgroundColor = "maroon";document.getElementById("message").firstChild.nodeValue = "Click upper table cell to get row values";if(parseInt(tmp) >= 0 && parseInt(tmp) < 44)document.getElementById(tmp).style.backgroundColor = "eeeeee";else if(tmp.substring(tmp.length-1,tmp.length) != "X" && tmp != "message" && tmp != "tranTable") {document.getElementById(tmp).style.backgroundColor="d5d5d5";}if(tmp.substring(tmp.length-1,tmp.length) != "X") document.getElementById(tmp).style.color = "black";else document.getElementById(tmp).style.color = "blue";}function buttonDown(e) {if( ((is.NS5) ? e.which : event.button) != 1) return true;tmp = (is.NS5) ? e.target.getAttribute("id") : event.srcElement.id;if(! tmp)return trueif(tmp.substring(tmp.length-1,tmp.length) == 0)return;if(tmp == "down")scrollDown();if(tmp == "up")scrollUp();if(parseInt(tmp) || tmp == "00")getRowValue(tmp);if(tmp == "update")changeRow();if(tmp == "tran")buildTranStr();}function buttonColor(id,backColor,fontColor,id1,message) {if(id.substring(id.length-1,id.length) != "X") {document.getElementById(id).style.backgroundColor = backColor;document.getElementById(id).style.color = fontColor;}id1.firstChild.nodeValue = message;id1.style.color = fontColor;id1.style.backgroundColor = backColor;}function scrollDown() {id = _pages * 20;p = id + 20;ct = ((_tableData.length-p)/4);if(ct < 0) return;for(i = 0; i < 5; i++) {for(j = 0; j < 4; j++) {myCell = document.getElementById(i+''+j);if(ct > 0)myCell.firstChild.nodeValue = _tableData[p++];else document.getElementById(i+''+j).firstChild.nodeValue = " - ";}ct--;}_pages++;}function scrollUp() {if(_pages==0) return;id = _pages * 20; p = id - 20; x = p + 20;for(i = 0; i < 5; i++) {for(j = 0; j < 4; j++) {document.getElementById(i+''+j).firstChild.nodeValue = _tableData[p++];}}_pages--;}function buildDataTable(appendToId, data, style, header) {table = document.createElement("TABLE");table.style.backgroundColor = "maroon";t = style.split(";");for(i = 0; i < t.length;) {f = t[i++].split(":");x = "table."+f[0]+"='"+f[1]+"'";eval(x);}tablebody = document.createElement("TBODY");row = document.createElement("TR");for(var i = 0; i < header.length; i++) {cell = document.createElement("TD");if(i == 0)cell.setAttribute("width","60px");else cell.setAttribute("width","170px");cell.setAttribute("align","center");cell.style.backgroundColor = "lightgreen";cell.style.fontWeight = "bold";cell.appendChild(document.createTextNode(header[i]));row.appendChild(cell);}tablebody.appendChild(row);c = 0;ptr = (data.length > 20) ? 20 : data.length;for(var i = 0; i < ptr;) {row = document.createElement("TR");for(j = 0; j < header.length; j++) {if(j == 1) {cell.setAttribute("align","center");cell.style.fontWeight = "bold";}cell = document.createElement("TD");cell.setAttribute("id",c+''+j);cell.style.backgroundColor = "#eeeeee";cell.appendChild(document.createTextNode(data[i++]));row.appendChild(cell);}c++;tablebody.appendChild(row);}table.appendChild(tablebody);appendToId.appendChild(table);}function buildTranTable() {if(_ff == 1) {tBody = document.getElementById("tBod");myTR = document.getElementsByTagName("TR");for(i = 6;i < myTR.length; i++) {if(document.form0.row.value == myTR.item(i).firstChild.firstChild.nodeValue) tBody.removeChild(myTR.item(i));}}if(_ff == 0) {table1 = document.createElement("TABLE");table1.style.backgroundColor="maroon";table1.id = "_table1";table1.align = "center";table1.border = 0;table1.width = 600;tablebody1 = document.createElement("TBODY");tablebody1.id = "tBod";}row1 = document.createElement("TR");row1.id = p;for(i = 0; i < document.form0.length; i++) {cell1 = document.createElement("TD");cell1.id = "tranTable";cell1.style.backgroundColor = "#eeeeee";cell1.style.color = "black";if(i == 0) {cell1.setAttribute("width","60px");cell1.setAttribute("align","center");}else cell1.setAttribute("width","170px");a = document.form0.elements[i].value;document.form0.elements[i].value = "";if(i == 0)cell1.appendChild(document.createTextNode(_cellZero));else cell1.appendChild(document.createTextNode(a));row1.appendChild(cell1);}tablebody1.appendChild(row1);table1.appendChild(tablebody1);docBody.appendChild(table1);_ff = 1;_chgFlag = null;}function buildTranStr() {tranStr = "updateTable.cgi?";myTDs = document.getElementsByTagName("TD");if(myTDs.length<25)return;for(i=24;i<myTDs.length;) {for(j=0;j<4;){tranStr += j++ +"&" + myTDs.item(i++).firstChild.nodeValue + "=";}}alert("Not implemented in demo ! window.location = " +tranStr);}function changeRow() {if(! _id) return;p = ((_pages * 20) + (_id * 4));_cellZero = document.getElementById(_id+0).firstChild.nodeValue;for(i = 0; i < document.form0.length; i++) {if(document.getElementById(_id+i).firstChild.nodeValue != document.form0.elements[i].value && i > 0) {_chgFlag=true;document.getElementById(_id+i).firstChild.nodeValue = document.form0.elements[i].value;_tableData[p+i] = document.form0.elements[i].value;}}_id = 0;if(_chgFlag) buildTranTable();}function getRowValue(x) {_rawId = x;_id = x.substring(0,x.length-1);for(i = 0; i < document.form0.length; i++) {document.form0.elements[i].value = document.getElementById(_id+i).firstChild.nodeValue;}selectedCell = x.substring(x.substring.length-1,x.substring.length);setTimeout("cellSelect(selectedCell)",100);}function cellSelect(selectedCell) {document.forms[0].elements[selectedCell].select();}function makeButton(myId,appendId,styleStr,text) {myButton = document.createElement("BUTTON");myButton.id =myId;temStr = (styleStr.substring(styleStr.length-1,styleStr.length)==";") ?styleStr.substring(0,styleStr.length-1) : styleStr;temp = temStr.split(";");for(i = 0; i < temp.length; i++) {x = temp[i].split(":");str = "myButton.style."+x[0]+"='"+x[1]+"'";eval(str);}myButton.appendChild(document.createTextNode(text));appendId.appendChild(myButton);}function makeLink(href,text,styleStr,appendTo,linkId) {link = document.createElement("A");link.id=linkId;temStr = (styleStr.substring(styleStr.length-1,styleStr.length)==";") ?styleStr.substring(0,styleStr.length-1) : styleStrtemp = temStr.split(";");for(i = 0; i < temp.length; i++) {x=temp[i].split(":");str = "link.style."+x[0]+"='"+x[1]+"'";eval(str);}link.setAttribute("href",href);link.appendChild(document.createTextNode(text));appendTo.appendChild(link);}window.onload = build_W3C_body;// End --></script>

I have a page which can be veiwed

[SA Rob]

Hi Folks,As it goes it seems I can make changes to the file / script posted. . . . I have been succesful in adding a few columns and changing the headings.Am I wasteing my time in this process ?If it doesnt update in the MySQL then I am and a different tack needs to be adopted.

[thescientist]

Javascript by itself cannot make any changes to MySQL. It's a client side scripting language and runs just in the browser. What you would need is to create some sort of server side script proxy whereby Javascript would make an AJAX request to the script, give it whatever information it needs to make the database updates or whatever, and then that server-side script would make the calls to the database and possibly return something if you're application is expecting it.

[SA Rob]

Javascript by itself cannot make any changes to MySQL. It's a client side scripting language and runs just in the browser. What you would need is to create some sort of server side script proxy whereby Javascript would make an AJAX request to the script, give it whatever information it needs to make the database updates or whatever, and then that server-side script would make the calls to the database and possibly return something if you're application is expecting it.

Wow - thats sounds quite complex - but in understanding it then.This process is possible - that is to call information from MySQL - add or alter it and then by submission send the new information back to MySQL for another use.I appreciate your reply

[thescientist]

yes. that process needs to happen with a server side script (somewhere in the chain). It's the same concept as using forms to submit information to a database.

[SA Rob]

yes. that process needs to happen with a server side script (somewhere in the chain). It's the same concept as using forms to submit information to a database.

Thanks againWould you perhaps be able to assist / do this for me ?

[thescientist]

Any of us would be happy to assist you. I would first recommend going over the PHP/MySQL tutorials and the AJAX section of the javascript tutorials. Also good would be understanding how forms interact with server side scripts. That should give you enough info on the high level stuff so you can better plan an approach that best suits your applications needs/specifications.

[SA Rob]

Any of us would be happy to assist you. I would first recommend going over the PHP/MySQL tutorials and the AJAX section of the javascript tutorials. Also good would be understanding how forms interact with server side scripts. That should give you enough info on the high level stuff so you can better plan an approach that best suits your applications needs/specifications.

Hi,Thanks for the positive feedback.I will go and read as suggested in order that I can learn some more and understand better what you are suggesting.I myself have no code experiance for any of the languages and what i do know ar ethe very simple basics of how to change a colour ,for example and event then I need to go look and see.Your assitance here would be accepted when you can.In terms of understanding what my needs are I think I have a good idea but would welcome any suggestions that my contribute to the succes of my mini tasks

[SA Rob]

Can any body help here - Please ?Please check this link and let me know

[justsomeguy]

I can't check that link, because I don't have IE5 or Netscape 6.

[SA Rob]

I can't check that link, because I don't have IE5 or Netscape 6.

Hi - I use IE8 and it seems to veiw ok

[justsomeguy]

Right, I use Opera. It doesn't like Opera apparently. It's using an old version of browser sniffing to look for words in the user agent string.

[SA Rob]

Right, I use Opera. It doesn't like Opera apparently. It's using an old version of browser sniffing to look for words in the user agent string.

Oh well - I dont now how I can help ?

[thescientist]

what do you need help with? what have you tried?

[SA Rob]

what do you need help with? what have you tried?

Hi ,I have done quite a bit of reading and searching on the web.I have made some changes to the above file in order to get 18 columns but I dont know the language at all.I have played with various changes in the script to see if I can get it to do what I am looking for ultimately with little positive effect as th elogic is beyond me.I am trying to get the information to post to MySQL and if needed edit the number if a correction needs to be made.If you copy the script above and try it you will see part of what I am trying to explain , yet a little differentThanks for you interest