JSFiddle - React, Tailwind, and code Playground
by SASSACB
HTML
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script data-cfasync="false" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<form id="foo" action="https://script.google.com/macros/s/AKfycbxJF7rw7FxxOVCRzBJYShk1ru_YILWLB9MxLJdYEPcXCqgTn6U/exec" method="POST" target="destConfirm" class="w3-container">
<input id="rowInd" name="rowInd" type="text" value="">
<input id="colInd" name="colInd" value="">
<input id="cellData" name="cellData" value="" onchange="change()" autocomplete="off">
<p id="result"></p>
<input id="botao" type="submit" value="Send">
</form>
<iframe name="destConfirm" width="1" height="1" id="dest"></iframe>
</body>
<script>
jQuery(document).ready(function($) {
// variable to hold request
var request;
// bind to the submit event of our form
$("#foo").submit(function(event) {
// abort any pending request
if (request) {
request.abort();
}
// setup some local variables
var $form = $(this);
// let's select and cache all the fields
var $inputs = $form.find("input, select, button, textarea");
// serialize the data in the form
var serializedData = $form.serialize();
// let's disable the inputs for the duration of the ajax request
// Note: we disable elements AFTER the form data has been serialized.
// Disabled form elements will not be serialized.
$inputs.prop("color", blue);
$('#result').text('Sending data...');
// fire off the request to /form.php
request = $.ajax({
url: "https://script.google.com/macros/s/AKfycbxJF7rw7FxxOVCRzBJYShk1ru_YILWLB9MxLJdYEPcXCqgTn6U/exec",
type: "post",
data: serializedData
});
// callback handler that will be called on success
request.done(function() {
...
CSS
#result,
#botao,
#dest,
#rowInd,
#colInd {
/* #rowInd, colInd*/
display: none;
}
#cellData,
#cellData.focus {
border: 0px;
outline: none;
}
input {
width: 100%;
}