JSFiddle - React, Tailwind, and code Playground
HTML
<form method="post">
<input type="text" name="customer">
<input type="submit" id="btn" value="submit:Toggle div green">
</form>
<div id="mydiv">KASTEN: (no data submitted)</div>
CSS
#mydiv {
width: 30%;
height: 100px;
border: 6px solid green;
}
body {
color:#FF004C;
}
JavaScript
var $form = $('form');
var $resultDiv = $('#mydiv');
$resultDiv.hide();
var url = '/echo/html/';
var successHandler = function(data, textStatus, jqXhr) {
$resultDiv.html(data);
$resultDiv.fadeToggle(200);
};
$form.submit(function(ev) {
ev.preventDefault();
if (! $resultDiv.is(':visible')) {
var d = $form.serialize();
$.post(
url,
{html: d},
successHandler
);
} else {
$resultDiv.fadeToggle(1);
}
});