Radio type input check with jQuery

Question

Good evening guys, I’m having a hard time here and I can’t seem to fix it.

I have a checkout page where I display two means of payment, billet and card, the options for the user to select whether they prefer billet or card are two radio fields. Follows the html.

<section class="campaign-details-wrap">

    <div class="container">
                  {!! Form::open(['id' => 'form']) !!}

                <div class="form-group">
                    <div class="row">
                        <div class="col-md-6 mb-0">
                            <h4 class="mb-3">Pagamento</h4>
                            <label for="amount" class="font-weight-bold">Valor</label>
                            <input type="text" name="amount" class="form-control" value="" placeholder="" maxlength="12" required/>
                            </div>{{--#Col --}}

                    </div>{{--#Row --}}
                </div>{{--#Form-group --}}


                <hr class="mb-4">

                <div class="form-group">

                    <div class="row">
                        <div class="col-md-12 mb-0 mt-0">
                            <input id="paymentCheck" name="paymentMethod" value="billet" type="radio" checked> 
                            <label class="form-check-label" for="paymentCheck">Boleto</label>
                        </div>
                    </div>{{--#Row --}}

                    <div class="row">
                        <div class="col-md-12 mb-0 mt-0">
                            <input id="paymentCheck" name="paymentMethod" type="radio" value="card" class="name_display_wrap">
                            <label class="form-check-label" for="paymentCheck">Cartão</label>
                        </div>
                    </div>{{--#Row --}}

                </div>{{--#Form-group --}}


        {!! Form::close() !!}

        <a href="" class="btn-finished">Finaliza Pagamento</a>

    </div>

</section>

I need to perform some actions in jQuery, but each action of these depends on the selected payment method.

I need to select the input/radio, take the value of this radio to then execute the action, but I’m not able to get the value of input/radio if it was billet or card to perform the action, someone knows how to do it in jQuery ?

Answer 1

You cannot have two elements with the same ID in the form. Your radio options must have the same name but not the same ID.

Changing this, it is possible to take the value of the radio by name, so:

$(document).ready(function () {
   $('#mostrar').click(function () {
      alert($('input[name=paymentMethod]:checked').val());
   });
   
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>
   <input id="paymentCheckBillet" name="paymentMethod" value="billet" type="radio" checked> 
   <label class="form-check-label" for="paymentCheck">Boleto</label>
</p>
<p>
   <input id="paymentCheckCard" name="paymentMethod" type="radio" value="card" class="name_display_wrap">
    <label class="form-check-label" for="paymentCheck">Cartão</label>
</p>
<button id="mostrar">Mostrar escolha</button>