Невозможно получить значение проверенного переключателя

Question

Вот HTML:

        <form>
            <div class="form-group">
                <div class="checkbox-detailed male_input">
                    <input type="radio" name="gender" id="male" value="male">
                    <label for="male">
                    <span class="checkbox-detailed-tbl">
                        <span class="checkbox-detailed-cell">
                            <span class="checkbox-detailed-title">Male</span>
                        </span>
                    </span>
                    </label>
                </div>
                <div class="checkbox-detailed female_input" style="margin-left: 25px!important">
                    <input type="radio" name="gender" id="female" value="female">
                    <label for="female">
                    <span class="checkbox-detailed-tbl">
                        <span class="checkbox-detailed-cell">
                            <span class="checkbox-detailed-title">Female</span>
                        </span>
                    </span>
                    </label>
                </div>
            </div>
            <button type="submit" class="btn btn-rounded" id="user_submit">Sign In</button>
        </form>

И вот раздел javascript:

var user_gender = $("input[name='gender']:checked");
var user_submit = $('#user_submit');

user_submit.click(function(){
    console.log(user_gender.val())
});

Я также пробовал var user_gender = $("input[name=gender]:checked"); (без кавычек между полами) и var user_gender = $("input:radio[name='gender']:checked");, но это все равно не сработало. Для переменной user_gender ведение журнала не определено, я что-то не так делаю?

Answer 1

Вы хотите переместить запрос в функции следующим образом:

var user_submit = $('#user_submit');

user_submit.click(function(){
    var user_gender = $("input[name='gender']:checked");
    console.log(user_gender.val())
});

Что вы делаете, так это получаете проверенные значения перед отправкой, что, вероятно, на момент загрузки страницы - ничто.

Answer 2

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

Для этого переместите селектор в обработчик событий:

$('form').submit(function(e) {
  e.preventDefault(); // stop the form submission. Remove once you've finished testing
  var $user_gender = $('input[name="gender"]:checked');
  console.log($user_gender.val())
});

Несколько вещей, чтобы отметить здесь. Во-первых, соглашение о присвоении имен переменным, которые содержат объекты jQuery, заключается в добавлении к их именам префикса $, как я делал в приведенном выше примере.

Во-вторых, при работе с формами подключайтесь к событию submit самого form, а не к событию click кнопки submit. Это из соображений доступности. Это также лучше семантически.