JSFiddle - React, Tailwind, and code Playground

by s4ty

HTML

<textarea id="eins"></textarea>
<textarea id="zwei"></textarea>
<textarea id="drei"></textarea>

JavaScript

$(function(){    
    var busy = false;   
    $('textarea')
        .focus(function(){ 
            $("#"+this.id+"_ok") 
                .css({backgroundColor: "#ff00ff"})
                .html('');
        })
        .mouseleave(function () {  
            console.log(busy);
            if(!busy){ 
                busy = true; 
                var dataString = 'value='+$(this).val()+'&field='+this.id;
                console.log(dataString);
                $.ajax({ 
                    type: "POST", 
                    url:  "update.php", 
                    data: dataString, 
                    
                    success: function(e, xhr, settings){ 
                    
                        $("#"+this.id+"_ok").html(e); 
                        $(this).css({backgroundColor: "#ACFA58"});   
                    }, 
                    complete: function() { busy = false;}, 
                    
                    error: function(){ 
                        $('#save_success').html('Daten wurden nicht gespeichert'); 
                    } 
                }); 
                $(this).blur(); 
            } 
        });  
});