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" onsubmit="test(this.id)" class="w3-container">
      <input id="rowInd" name="rowInd" type="text" value="${"dados"}" autocomplete="off">
      <input id="colInd" name="colInd" value="${"vemos"}" autocomplete="off">
      <input id="cellData" name="cellData" value="${"teste"}"  autocomplete="off" onfocus="this.value=''" onkeypress="this.style.width = ((this.value.length + 1) * 8) + 'px';test()">
      <p class="ex2" id="result"></p>
      <input id="botao" type="submit" value="Send">

    </form>
    <iframe name="destConfirm" width="1" height="1" id="dest"></iframe>
</body>
<script>
function test(cliced_id){
 alert(cliced_id);
   
    }
    var msgbox = document.getElementById("foo");
msgbox.addEventListener("foo", SendMessage, false);

// new message: raise newMessage event
function SendMessage(e) {

	e.preventDefault();
	var msg = document.getElementById("cellData").value.trim();

	if (msg && window.CustomEvent) {
		var event = new CustomEvent("newMessage", {
			detail: {
				message: msg,
				time: new Date(),
			},
			bubbles: true,
			cancelable: true
		});
	
		e.currentTarget.dispatchEvent(event);
	}

}
// listen for newMessage event
document.addEventListener("newMessage", newMessageHandler, false);

// newMessage event handler
function newMessageHandler(e) {
	LogEvent(
		"Event subscriber on "+e.currentTarget.nodeName+", "
		+e.detail.time.toLocaleString()+": "+e.detail.message
	);
}
    </script>

CSS

p.ex2 {display: inline;}
#botao,
#dest,
#rowInd,
#colInd {
  /* #rowInd, colInd*/
  display: none;
}

#cellData,
#cellData.focus {
  border: 1px;
  color:black;
  outline: none;
}

input {
  background-color:transparent;
}

JavaScript

var isAllLoaded = 2;
(function () {
        // Load jquery
        var script = document.createElement("script");
        script.src = 'https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js';
        script.type = 'text/javascript';
        // safe loading
        script.onload = function () {
                isAllLoaded--;
                loadfunction();
                drawInlineBar();
              
        };
        document.body.appendChild(script);

})();

function loadfunction($this) {
    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);
        
    var r = confirm("Confirma envio?");
    if (r == false) {
      alert("Dados Não enviados")
       $inputs.prop("disabled", false);
      $("#cellData").css("color", "red");
       $("#cellData.focus").css("color", "blue");
       $("#cellData.focus").css("width", "(((this.value.length + 1) * 8) + 'px');")
               $('#result').html('&#10008;');// log a message to the console
           
          console.log("Cancelado pelo Utilizador");
       event.preventDefault();
     return;
    } else {
    
        $('#result').text('A Enviar...');

        // fire off the request to /form.php
        request = $.ajax({
          url:...