JSFiddle - React, Tailwind, and code Playground

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>
<iframe name="hidden_iframe" id="hidden_iframe" style="display:none;" onload="if(submitted){document.location.href='http://jsfiddle.net/dandiebolt/RXjyQ/show/';}"></iframe>

  <h2>Enter Some Data and Watch Both the Report and Google Spreadsheet Update</h2>

  <form id="ss-form" name="ss-form" action="https://spreadsheets.google.com/formResponse?formkey=dEhFLURlbHZYdk54ODhPUEhaOGRlWVE6MQ" method="post" target="hidden_iframe" onsubmit="submitted=true;">
   <table border="0">
    <tbody>
     <tr>
      <td><label for="entry_0">Name</label></td>
      <td><input name="entry.0.single" value="" id="entry_0" type="text"></td>
     </tr>
        
     <tr>
      <td><label for="entry_2">Phone</label></td>
      <td><input name="entry.2.single" value="" id="entry_2" type="text"></td>
     </tr>

     <tr>
      <td><label for="entry_3">Email</label></td>
      <td><input name="entry.3.single" value="" id="entry_3" type="text"></td>
     </tr>
        
     <tr>
      <td><label for="entry_4">State</label></td>
      <td>
       <select name="entry.4.single" id="entry_4">
        <option value="" selected>Select ...</option>
        <option value="AL">Alabama</option>
        <option value="AK">Alaska</option>
        <option value="AZ">Arizona</option>
        <option value="AR">Arkansas</option>
        <option value="CA">California</option>
        <option value="CO">Colorado</option>
        <option value="CT">Connecticut</option>
        <option value="DE">Delaware</option>
        <option value="FL">Florida</option>
        <option value="GA">Georgia</option>
        <option value="HI">Hawaii</option>
        <option value="ID">Idaho</option>
        <option value="IL">Illinois</option>
        <option value="IN">Indiana</option>
        <option...

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

var submitted=false;
   $(function(){

    var SS_URL = "https://spreadsheets.google.com/tq?key=tHE-DelvXvNx88OPHZ8deYQ&hl=en&authkey=CPvg3MYE";
    $.ss(SS_URL).setQuery("select * where F like '%r%'").setField("timestamp,name,phone,email,state,class").send(function(success) {
     if (!success) {
      return;
     }
     var dataarray = [];
     this.each(function(i) {
      dataarray.push($(this)[0]);
     });
     $("#template").tmpl(dataarray).appendTo("#tablebody");
    });
   });