ctrlpanel/resources/views/models/redeem_voucher_modal.blade.php

<!-- The Modal -->
<div class="modal fade" id="redeemVoucherModal">
    <div class="modal-dialog">
        <div class="modal-content">

            <!-- Modal Header -->
            <div class="modal-header">
                <h4 class="modal-title">Redeem voucher code</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>

            <!-- Modal body -->
            <div class="modal-body">
                <form id="redeemVoucherForm" onsubmit="return false" method="post" action="{{route('voucher.redeem')}}">
                    <div class="form-group">
                        <label for="redeemVoucherCode">Code</label>
                        <div class="input-group">
                            <div class="input-group-prepend">
                                <div class="input-group-text">
                                    <i class="fas fa-money-check-alt"></i>
                                </div>
                            </div>
                            <input id="redeemVoucherCode" name="code" placeholder="SUMMER" type="text" class="form-control">
                        </div>
                        <span id="redeemVoucherCodeError" class="text-danger"></span>
                        <span id="redeemVoucherCodeSuccess" class="text-success"></span>
                    </div>
                </form>
            </div>

            <!-- Modal footer -->
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                <button name="submit" id="redeemVoucherSubmit"  onclick="redeemVoucherCode()" type="button" class="btn btn-primary">Redeem</button>
            </div>

        </div>
    </div>
</div>


<script>
    function redeemVoucherCode(){
        let form = document.getElementById('redeemVoucherForm')
        let button = document.getElementById('redeemVoucherSubmit')
        let input = document.getElementById('redeemVoucherCode')

        console.log(form.method , form.action)
        button.disabled = true

        $.ajax({
            method : form.method,
            url : form.action,
            dataType: 'json',
            data: {
                code : input.value
            },
            success : function (response) {
                resetForm()
                redeemVoucherSetSuccess(response)
            },
            error : function (jqXHR, textStatus, errorThrown) {
                resetForm()
                redeemVoucherSetError(jqXHR.responseJSON)
                console.error(jqXHR.responseJSON)
            },

        })
    }

    function resetForm(){
        let button = document.getElementById('redeemVoucherSubmit')
        let input = document.getElementById('redeemVoucherCode')
        let successLabel = document.getElementById('redeemVoucherCodeSuccess')
        let errorLabel = document.getElementById('redeemVoucherCodeError')

        input.classList.remove('is-invalid')
        input.classList.remove('is-valid')
        successLabel.innerHTML = ''
        errorLabel.innerHTML = ''
        button.disabled = false
    }

    function redeemVoucherSetError(error){
        let input = document.getElementById('redeemVoucherCode')
        let errorLabel = document.getElementById('redeemVoucherCodeError')

        input.classList.add("is-invalid")
        errorLabel.innerHTML = error.errors.code[0]
    }

    function redeemVoucherSetSuccess(response){
        let input = document.getElementById('redeemVoucherCode')
        let successLabel = document.getElementById('redeemVoucherCodeSuccess')

        successLabel.innerHTML = response.success
        input.classList.remove('is-invalid')
        input.classList.add('is-valid')
    }
</script>