Google Spreadsheet Interface

by dandiebolt

HTML

<script src="https://www.quickbase.com/db/befe2yy7d?a=dbpage&amp;pagename=jspreadsheet.js"></script>
<script src="https://www.quickbase.com/db/befe2yy7d?a=dbpage&amp;pagename=jquery.tmpl.min.js"></script>
<script src="https://www.quickbase.com/db/befe2yy7d?a=dbpage&amp;pagename=jquery.form.js"></script>
<form id="ss-form" name="ss-form" action="https://spreadsheets.google.com/formResponse?formkey=dEhFLURlbHZYdk54ODhPUEhaOGRlWVE6MQ" method="post">
    
    <table border='0'>
        <tr>
            <td><label for="entry_0">Name</label></td>
            <td><input name="entry.0.single" value="aa" id="entry_0" type="text" /></td>
        </tr>
        
        <tr>
            <td><label for="entry_2">Phone</label></td>
            <td><input name="entry.2.single" value="bb" id="entry_2" type="text" /></td>
        </tr>
        
        <tr>
            <td><label for="entry_3">Email</label></td>
            <td><input name="entry.3.single" value="cc" id="entry_3" type="text" /></td>
        </tr>
        
        <tr>
            <td><label for="entry_4">State</label></td>
            <td><input name="entry.4.single" value="dd" id="entry_4" type="text" value="jQuery" /></td>
        </tr>
        
        <tr>
            <td><label for="entry_5">Class</label></td>
            <td><input name="entry.5.single" value="jQuery" id="entry_5" type="text" /></td>
        </tr>
        
        <tr>
            <td>&nbsp;</td>
            <td><input name="submit" value="Submit" type="submit" id="submit"/></td>
        </tr>
    </table>
    
</form>

<script id="template" type="text/x-jquery-tmpl">
    <tr>
        <td>${name}</td>
        <td>${phone}</td>
        <td>${email}</td>
        <td>${state}</td>
        <td>${class}</td>
    </tr>
</script>

<table>
    <thead>
        <tr>
            <th>Name</th>
            <th>Phone</th>
            <th>Email</th>
            <th>State</th>
            <th>Class</th>
        </tr>
    </thead>
    <tbody...

CSS

body {
    font-family: Arial, Sans-Serif;
    font-size: 0.85em;
}
table {
    margin-top: 10px;
}
td, th {
    padding:3px;
}
table, td, th {
    border: 1px solid black;
    border-collapse:collapse;
    font-size: 0.95em;
}
th {
    text-align: center;
    font-weight: bold;
    font-size: 1em;
    background-color:#fec;
}

JavaScript

$("#ss-form").css("background-color", "red");

$("#submit").click(function() {
    alert("click");
    var name   = $("#entry_0").val();
    var phone  = $("#entry_2").val();
    var email  = $("#entry_3").val();
    var state  = $("#entry_4").val();
    var course = $("#entry_5").val();
    console.log(name, phone, email, state, course);
    var dataString = "";
    dataString += "entry.0.single=" + name;
    dataString += "&entry.2.single=" + phone;
    dataString += "&entry.3.single=" + email;
    dataString += "&entry.4.single=" + state;
    dataString += "&entry.5.single=" + course;
    console.log(dataString);
    var url = "https://spreadsheets.google.com";
    url += "/formResponse";
    url += "?formkey=dEhFLURlbHZYdk54ODhPUEhaOGRlWVE6MQ";
    console.log(url);
    $.ajax({
        type: "POST",
        url: url,
        data: dataString,
        contentType: "application/x-www-form-urlencoded",
        beforeSend: alert("beforeSend"),
        error: function(xhr, ajaxOptions, thrownError) {
            alert("xhr.status: " + xhr.status);
            alert("xhr.responseText: " + xhr.responseText);
            alert("thrownError: " + thrownError);
        },
        
        success: function(response) {
            alert("success");
        }
    });
    return false;
});



/*
function showRequest(formData, jqForm, options) { 
    var queryString = $.param(formData); 
    alert('About to submit: \n\n' + queryString); 
    return true; 
} 
 
function showResponse(responseText, statusText, xhr, $form)  { 
    alert('status: ' + statusText + '\n\nresponseText: \n' + responseText + 
          '\n\nThe output div should have already been updated with the responseText.'); 
}
     
$("#ss-form").ajaxForm({target: '#output',beforeSubmit: showRequest, success: showResponse, type: 'post'});
*/

var SS_URL = "https://spreadsheets.google.com/tq?key=tHE-DelvXvNx88OPHZ8deYQ&hl=en&authkey=CPvg3MYE";

$.ss(SS_URL).setQuery("select * where F like...