JSFiddle - React, Tailwind, and code Playground

by merganser

HTML

<form id="loginPopupForm" action="#">
    <input type="hidden" value="Login" name="Action">
    <label class="ui-hidden-accessible ui-input-text" for="email">Email:</label>
    <div class="ui-input-text ui-shadow-inset ui-corner-all ui-btn-shadow ui-body-c ui-input-has-clear">
        <input type="email" data-clear-btn="true" required="required" value="" placeholder="Email" id="email" name="Email" class="ui-input-text ui-body-c" style="background-image: url(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAASCAYAAABSO15qAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3QsPDiEFu6xIcAAAAXhJREFUOMvNk8FLVFEUxn/ffRdmIAla1CbBFDGCpoiQWYlBLty7UHAvEq2HYLhveDMws2/TIly6E9SdIEj+AVYgRaTgXhe2C968x2nhTOjow8pNZ/ede/ide893Lvx3UavVhkMIk30dQqiGECpF9e68CCG8LpfL3yStAAIk6Z2kT3Ect68C+AGdSroFVEII82aWSXoGYGYHVwE0qOM43pU0BXw3s1zSI2AnSZKXhYB6vT7inLvd7XZ/eu8fOOe2JEW9zjkwZ2bHkoayLDtpt9ufLzzBe/8GWC6VSpc7nIE2pLPLeu/fA0uDQ3T/6pp6039uZnfN7Ieke1EUrQOu3/VawPloNBrbwIyZ7TvnLvg/+mKOJ3xk88NR4R4sADM92fp9MDRMdXaRxenHVMbuFy8SMAFkZval2Wyu9ZN3Hk4zWx0nAtKsWwxotVrNNE2f5nn+CrB+/nRvlSR5y2EK0TWbSKfT+fo3Lribfr4bA/yfl56y2kkuZX8BjXVyqMs8oFcAAAAASUVORK5CYII=&quot;); background-repeat: no-repeat; background-attachment: scroll; background-position: right center;"><a title="clear text" class="ui-input-clear ui-btn ui-btn-up-c ui-shadow ui-btn-corner-all ui-fullsize ui-btn-icon-notext" href="#" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-icon="delete" data-iconpos="notext" data-theme="c" data-mini="false"><span class="ui-btn-inner"><span class="ui-btn-text">clear text</span><span class="ui-icon ui-icon-delete ui-icon-shadow">&nbsp;</span></span></a>
    </div>
    <label class="ui-hidden-accessible ui-input-text" for="password">Password:</label>
    <div class="ui-input-text ui-shadow-inset ui-corner-all ui-btn-shadow ui-body-c ui-input-has-clear">
        <input type="password" data-clear-btn="true" required="required" value="" placeholder="Password"...

JavaScript

$(document).ready(function () {
    $('#loginPopupForm').submit(function () {

        var formPost = $('#loginPopupForm').serialize();
        // disable all inputs
        $('input', '#loginPopupForm').attr('disabled', true);

        var url = 'https://www.scoutbook.com/mobile/login.asp?Source=&Redir=';
        $.ajax({
            type: 'POST',
            url: url,
            dataType: 'script',
            data: formPost,

            contentType: "application/x-www-form-urlencoded",
            error: function (xhr, ajaxOptions, thrownError) {
                //location.href = '/mobile/500.asp?Error=' + escape('url: ' + url + ' postData: ' + formPost + ' Status: ' + xhr.status + ' thrownError: ' + thrownError + ' responseText: ' + xhr.responseText.substring(0, 400))
                console.log(xhr);
            },
            success: function (data) {
				console.log(data);            
            }
        });
        // enable all inputs
        $('input', '#loginPopupForm').attr('disabled', false);
        return false;
    });
});