JSFiddle - React, Tailwind, and code Playground

by adrianlynch

HTML

<div class="error-notification"><p class="payment-error-text"></p></div>
<form data-spring-plugin="validation" id="springform" class="allow-widows" method="post" action="" novalidate="novalidate">
    <p style="display: none;">
        <input type="text" name="captcha" id="captcha" aria-invalid="false">
        <input type="text" name="sessioncheck" id="sessioncheck" value="" aria-invalid="false">
    </p>
    <p> <strong>Required fields are marked with <span class="requiredflag">*</span></strong>

    </p>
    <p style="display: none;">
        <input type="hidden" name="page" id="page" style="display: none;" value="billing">
    </p>
    <p class="note">Your Details</p>
    <p id="idp116819772">
        <label class="label" for="first-name"><strong class="requiredflag">*</strong>First Name</label>
        <input type="text" required="required" id="first-name" name="first-name" class="text required" value="A" aria-required="true" aria-invalid="true">
    </p>
    <p id="idp116820732">
        <label class="label" for="last-name"><strong class="requiredflag">*</strong>Last Name</label>
        <input type="text" required="required" id="last-name" name="last-name" class="text required" value="B" aria-required="true" aria-invalid="true">
    </p>
    <p id="idp104119108">
        <label class="label" for="address-1"><strong class="requiredflag">*</strong>Address 1</label>
        <input type="text" required="required" id="address-1" name="address-1" class="text required" value="C" aria-required="true" aria-invalid="true">
    </p>
    <p id="idp104120068">
        <label class="label" for="address-2"><strong class="requiredflag">*</strong>Address 2</label>
        <input type="text" required="required" id="address-2" name="address-2" class="text required" value="D" aria-required="true" aria-invalid="true">
    </p>
    <p>
        <label class="label" for="shipping-state"><strong class="requiredflag">*</strong>State</label>
        <select required="required"...

CSS

body {
    font-family: Helvetica, Arial, Sans-Serif;
}

.error-notification {
    background-color: #fed656;
    border: 1px solid #ccc;
    padding: 0 20px;
    display: none;
}

form {
    padding: 10px;
    border: 1px solid #ccc;
}
}

JavaScript

jQuery(document).ready(function ($) {
    
    var ewayForm = 'http://development.thebox.com.au/eway';
    var springForm = 'http://development.thebox.com.au/form';
    
    $("#springform").has("#credit-card-number").submit(function (event) {
        
        //disable form elements to prevent client modification
        $('input[type="submit"]', this).attr('disabled', 'disabled').prop('value', 'Processing...');
        
        //this field lets us know what state this form is
        var ewayresult = $("#ewayresult").val();
        
        if (!$('#order').val()) {
            event.preventDefault();
            //Order field seems empty - show the error notice
            $('.payment-error-text').text('Your order can not be found, please restart the ordering process');
            $('.error-notification').css('display', 'block');
        } else if (ewayresult === "Success") {
            //Payment has been completed, so allow the form to post normally
            alert('Credit Card Successfully Processed');
            
            $("#springform").attr('action', springForm);
            $('#ewayresult').val('Payment Confirmed');
            $('#credit-card-number').val('');
            return;
        } else {
            //No successful payment as of yet, lets try to process the credit card
            event.preventDefault();
            alert('Credit Card Not Processed yet');
            var progress = '';
            var form = $(this);
            var inputs = form.find("input, select, button, textarea");
            var serializedData = form.serialize();

            request = $.ajax({
                url: ewayForm,
                type: 'post',
                async: false,
                data: serializedData + '&ajax=json',
                dataType:'json'
            }).done(function (response) {
                if (response.success) {
                    //Success! Set a hidden flag to Success
                    alert('Success response from...