JSFiddle - React, Tailwind, and code Playground

by chauhangs

HTML

</table>
</div>
    <div style="text-align:left;position:absolute;bottom:0px;left:10px;width:480px"> 
        <?php echo "Total ticket price &pound".$price ?><br>
        <br>
        <h3>Payment</h3>
        <form method="post" action="scripts/ticket_buy.php" onSubmit="return check()">
        <div class="item_container">
            Card Number <input value="" type="text" id="cardNumber" name="cardNumber" style="position:absolute;right:0px" /><br />
            Name On Card<input value="" type="text" id="nameOnCard" style="position:absolute;right:0px" name="nameOnCard" /><br />
            Expiry Date<input value="" type="date" id="expDate" style="position:absolute;right:0px" name="expDate" /><br />
            CVC Number<input value="" type="text" id="cvc" style="position:absolute;right:0px" name="cvc">
            <br />
            <input type="hidden" value='<?php echo $eventIDwanted ?>' name="eID">
            <input type="hidden" value="<?php echo $performanceIDwanted ?>" name="pID">
            <input type="submit" value="Purchase" class="button_default" style="width:480px">
        </div>
        </form>
   </div>

JavaScript

function check() {
    var num = document.getElementById('cardNumber');
    var name = document.getElementById('nameOnCard');
    var dater = document.getElementById('expDate');
    var cvc = document.getElementById('cvc');

    if (num.value === "" || num.value === null) {
        alert('Please enter your card number');
        return false;
    } else if (name.value === "" || name.value === null) {
        alert('Please enter the as it appears on the card');
        return false;
    } else if (dater.value === "dd/mm/yyy" || dater.value === "" || dater.value === null) {
        alert('Please Enter a Date');
        return false;
    } else if (cvc.value === "" || cvc.value === null) {
        alert('Enter the CVC number, this can be found as the \n last 3 digits on the number on the back of your code');
        return false;
    } else {
        var check = confirm('Are you sure you wish to purchase these tickets');
        if (check === true) {
            return true;
        } else {
            return false;
        }
    }
}