JSFiddle - React, Tailwind, and code Playground

by usmanhalalit

HTML

<div>
      <h1>Add new post</h1>
      <div id="flashMessage"></div>
      <form id="formPost" method="post" action="post.php">
        <textarea id="post" name="post"></textarea>
        <input type="submit" value="Save" />
        <div class="ajaxloader">
          <img src="ajax-loader.gif" />
        </div>
        <div class="clear"></div>
      </form>
    </div>

JavaScript

$(document).ready(function(e) {
        $("#formPost input").attr("disabled", false);

        $("#formPost input:submit").click(function() {
            $.ajax({
                type: 'POST',
                url: 'post.php',
                dataType: 'json',
                data: $('#formPost').serialize(),
                beforeSend: function(XMLHttpRequest) {
                    $("#formPost input").attr("disabled", true);
                    $("#formPost .ajaxloader").show();
                },
                success: function(data) {
                    var message = $("#flashMessage");

                    message.text(data.msg);
                    if(data.error) {
                        message.addClass("fail");
                    }
                    else {
                        message.addClass("success");
                    }
                    message.show();
                },
                error : function(XMLHttpRequest, textStatus, errorThrown) {
                    $('#formPost .ajaxloader').hide();
                    $('#flashMessage').removeClass().
                        addClass('fail').text('There was an error.').show();
                },
                complete: function(XMLHttpRequest) {
                    $("#formPost input").attr("disabled", false);
                    $("#formPost .ajaxloader").hide();
                }
            });
            return false;
        });
    });