JSFiddle - React, Tailwind, and code Playground

by Tony Montana

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<button class="btn btn-default btn-md" type="button" name="enviar-form" id="enviar-form">
    Enviar Form
</button>

<div id="modal-success" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Modal Header</h4>
            </div>
            <div class="modal-body">
                <p>Some text in the modal.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

JavaScript

//$('.loaderImage').show();

var data = {
    nome: "Montana",
    profissao: "Badass"
};

$( "#enviar-form" ).on( "click", function () {
    $.ajax({
        type: "POST",
        url: "/echo/json/",
        data: data,
        dataType: "json",
        success: function (data) {
            $('.loader-image').hide();
            $('#modal-success').modal('show');
            $('form')[0].reset();
        },
        error: function (error) {
            //console.log(data);
        }
    });
});