Невозможно получить значения из полей формы радио, используя jQuery

Question

Я пытался создать сайт электронной коммерции для практики и хотел получить значения из поля формы Радио, если покупатель хочет заплатить около sh при доставке или хочет сделать платеж через PayPal. Я хочу получить значение поля формы, чтобы в случае его наложенного платежа я просто показывал пользователю «Заказ размещен», а если его PayPal, я перенаправляю на платежный шлюз.

Ниже приведен мой код

<div class="form-check">
    <input type="radio" name="paymentmode" id="cod" class="form-check-input" value="cod">
    <label for="cod">Cash on Delivery</label>   
    <input type="radio" name="paymentmode" id="paypal" class="form-check-input" value="paypal">
    <label for="paypal">PayPal</label>
</div>

И код JS ниже

<script>
    var radio = $("input[name='paymentmode']:checked").val();
    var button = $('.theButton');

    button.click(function() {
        alert(radio);
    });
</script>

. Каждый раз, когда я нажимаю кнопку, появляется предупреждение, но вместо значения из радиополей отображается «неопределенное». Пожалуйста, помогите мне

РЕДАКТИРОВАТЬ: Я пытался найти некоторые другие значения, такие как имя или адрес, и поле предупреждения просто ничего не возвращает, его пустое поле предупреждения

Answer 1

«радио» собирается получать данные при нажатии на кнопку.

<script>
var radio;
var button = $('.theButton');

    button.click(function() {
        radio = $("input[name='paymentmode']:checked").val();
        alert(radio);
        });
</script>

Answer 2

Ваш код не работает, потому что вы сначала задали значение в переменной, и всякий раз, когда значение переключателя изменяется, оно не влияет на эту переменную, поэтому ваш код работал не так, как ожидалось.

Попробуйте ниже рабочий код -

$('.theButton').click(function() {
  console.log($("input[name=paymentmode]:checked").val());
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-check">
  <input type="radio" name="paymentmode" id="cod" class="form-check-input" value="cod">
  <label for="cod">Cash on Delivery</label>
  <input type="radio" name="paymentmode" id="paypal" class="form-check-input" value="paypal">
  <label for="paypal">PayPal</label>
  <button class='theButton'>Click It!</button>
</div>