JSFiddle - React, Tailwind, and code Playground
by SASSACB
HTML
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script data-cfasync="false" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<title>Untitled Document</title>
<link href="#" type="text/css">
</head>
<body>
<form id="foo"
action="https://script.google.com/macros/s/AKfycbxJF7rw7FxxOVCRzBJYShk1ru_YILWLB9MxLJdYEPcXCqgTn6U/exec" method="POST" target="dojoConfirm" class="w3-container">
<input id="rowInd" name="rowInd" type="text" value="">
<input id="colInd" name="colInd" value="">
<input id="cellData" name="cellData" value="">
<p id="result"></p>
<input id= "btn" type="submit" value="Send">
</form>
<script data-cfasync="false" type="text/javascript">
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("disabled", true);
$('#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...
CSS
#result, #btn { /*, #rowInd, colInd*/
display:none;
}