INTERACTIVE SUPPLIER DETAILS WITH GOOGLE SHEETS

You may use the Google spread sheet as back-end database to show user interactive HTML form. This very simple with small trick, we can achieve the dynamic / user-interactive form. I am giving the source code. The following is source code for the given demo interactive sheet.

INTERACTIVE SUPPLIER DETAILS           Supp Code:    

First login Google spreadsheet and enter data in a excel sheet and save as public. The url of spreadsheet may be in the form of: VIEW DATA

https://docs.google.com/spreadsheet/ccc?key=0Alb2fNKlDNL3dDJFcUZpbm9kdDlMOHlDbkFpVURnR1E#gid=0
the above URL shows the details in excel form with grids.
Key:  Unique number provided by Goggle sheet.
#gid=0  this shows the sheet one of your Google spreadsheet.

If you want the sheet to be shown in stylish html form, then change
ccc? with   tq?tqx=out:html&tq=&
And the URL will be like:

https://docs.google.com/spreadsheet/tq?tqx=out:html&tq=&key=0Alb2fNKlDNL3dDJFcUZpbm9kdDlMOHlDbkFpVURnR1E#gid=0

Then , we check the supp code with first row of the excel sheet
select%20*%20where%20A%3D"+ data + "
with the select code, the url may be:

https://docs.google.com/spreadsheet/tq?tqx=out:html&tq=select%20*%20where%20A%3D"+ data + "& key=0Alb2fNKlDNL3dDJFcUZpbm9kdDlMOHlDbkFpVURnR1E#gid=0

You modify with any data /any row and do enjoy.
The source code is given below:

HTML CODE:
<html> <head> ....... ....... </head> <body> <div style="width:640px;border:1px solid #c0c0c0;text-align:center; margin-left:10px; padding:10px;background-color:#f0f0f0;"> <b>INTERACTIVE SUPPLIER DETAILS</b> &nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp; Supp Code: &nbsp; <select id="mycode" onChange="check(event.keyCode)"> <option value=" "></option> <option value="201">201</option> <option value="202">202</option> <option value="203">203</option> <option value="204">204</option> <option value="205">205</option> <option value="206">206</option> </select> &nbsp; <input type="button" value="ENTER" onClick="showModalWindow(document.getElementById('mycode').value)"> </div> <div style="width:680px; text-align:left; "> <iframe id="frame" width="100%" frameborder="0" style="border:none; display:none; height: 700px;"> </iframe> <script language="JavaScript"> var data; function showModalWindow(data) { var url1="https://docs.google.com/a/freemenu.info/spreadsheet/tq?tqx=out:html&tq=select%20*%20where%20A%3D"+ data + "&key=0Alb2fNKlDNL3dDJFcUZpbm9kdDlMOHlDbkFpVURnR1E"; document.getElementById('frame').style.display="block"; document.getElementById('frame').src=url1; } function check(code){ if(code==13){ showModalWindow(document.getElementById('mycode').value); } } </script> </div> </body> </html>

No comments:

Click Here To add Comment

Post a Comment