Input giving wrong results

Question

i am making a store with paypal, pay and mercadopago, but at the time of purchase when I select the input, it always saves as mercadopago.

Controller

    public function checkout()
    {
        if(!Security::ajax())
        {
            die();
        }

        $gateway = new Gateways();
        $gatewayData = $gateway->data();

        $gateway = $_POST['gateway'];

        $reference = $this->references->register();

html

<form class="row" method="post" id="checkout">
    <div class="col-md-12 form-group">
        <label><input type="radio" name="gateway" id="gateway" value="mercadopago" checked> MercadoPago</label><br>
        <label><input type="radio" name="gateway" id="gateway" value="pagseguro" > PagSeguro</label><br>
        <label><input type="radio" name="gateway" id="gateway" value="paypal"> PayPal</label><br>
        <br><br>
        <label><input type="checkbox" name="terms" required> Eu aceito os <a href="#" data-toggle="modal" data-target="#termos">termos de compra</a></label>
    </div>

js

$('.checkout').on('click', function(e) {

    e.preventDefault();

    var terms = $('input[name=terms]').is(':checked');

    if (!terms) {
        alert('Aceite os termos!');
        return;
    }

    let gateway = $('input[name=gateway]').val();

    $.ajax({
        url: '/carrinho/checkout',
        method: 'POST',
        data: {
            gateway: gateway
        },
        complete: function(result) {
            var res = JSON.parse(result.responseText);

            if (res.status) {
                location.href = res.link
            } else {
                alert(res.message);
            }
        }
    });

    return false;

});

it always results in mercadopago, I can never put by paypal or pagseguro

Answer 1

It’s probably because you’re wearing a single name="gateway" to the three camps:

<label><input type="radio" name="gateway" id="gateway" value="mercadopago" checked> MercadoPago</label><br>
<label><input type="radio" name="gateway" id="gateway" value="pagseguro" > PagSeguro</label><br>
<label><input type="radio" name="gateway" id="gateway" value="paypal"> PayPal</label><br>

Making it at the time of the jquery take the amount in:

let gateway = $('input[name=gateway]').val();

He is always picking up the first occurrence, so I suggest a loop to solve simply, for example:

$('input[name=gateway]').each(function(){
    var ths = $(this);
    if(ths.prop("checked")){
        var gateway = ths.val();
    }
});

That will check all inputs with the name="gateway" and define the variable var gateway only if you have the property checked=true

Prop Jquery