JSFiddle - React, Tailwind, and code Playground

by Tenderfeel

HTML

<form id="form">
    <p>
    <input type="text" id="text" name="text" placeholder="input message...">
    </p>
</form>
<div id="result"></div>

CSS

form,div {
    margin:10px;
}

JavaScript

$(function() {
    
    $('#form').on('submit', _submit);
    
});

function _submit(e){
    e.preventDefault();
    var $text = $('#text');
    var message = $text.val();
    $text.blur();
    
    $.ajax({
        url:'/echo/json/',
        type:'POST',
        dataType:'json',
        data:{
                 json:JSON.stringify({"message":"success"}),
            
                delay: 1

             },
        beforeSend:function(jqxhr){
            jqxhr.setRequestHeader('X-Request','JSON');
            $('#result').text('loading...');
        }
    })
    .then(
        function(data){
            console.log(data);
            $('#result').empty().text(data.message);
        },
        function(){
        }
    );
};