HTML Переключатель сохранения первого значения переключателя в базе данных

Question

Я новичок на работе Javascript & ajax. Я создаю основную форму c и сохраняю значения в базе данных Mysql. После нажатия кнопки «Отправить» в базе данных сохраняется только первое значение переключателя. Может кто-нибудь мне помочь? Вот мой HTML Код:

<form>
    <div class="form-group">

        <div class="form-group">
            <label>Email:</label>
            <input type="email"  class="from-control" name="Name">
        </div>

        <label class="form-check-label">Gender</label>
        <div class="form-check-inline">
            <input type="radio" class="form-check-input" name="Sex" id="Sex" value="Male" />Male
            <input type=radio class="form-check-input" name="Sex" id="Sex" value="Female" /> Female
        </div>

        <div class="form-group">
            <button class="btn btn-primary" type="submit" id="btn_submit">Submit</button>
            <button class="btn btn-seconday" type="button" id="btn_cancel">Cancel</button>
        </div>
    </div>
</form>

И мой Javascript код:

<script type="text/javascript">
    $(document).ready(function () {
        $('#btn_save').on('click',function() {
            var Email = $('#Email').val();
            var Sex = $('#Sex').val();

            $.ajax({
                type : "POST",
                url : "https://localhost/newCrud/test/save",
                dataType : "JSON",
                data: {Email:Email, Sex:Sex},
                success : function (data) {
                    $('[name = "Email"]').val("");
                    $('[name = "Sex"]').val("");
                }
            });
            return true;
        });
    });
</script>

База данных структура Сохраненные данные из отправки формы

Пожалуйста, помогите мне с моей проблемой, ребята, я сделал мой Изрядное количество исследований и не смог найти решение моей проблемы. Спасибо за ваши предложения.

Answer 1

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

Более простой способ решения вашей проблемы:

var Sex = $('input[name="Sex"]:checked').val();

Answer 2

Идентификаторы всегда должны быть уникальными. Когда вы делаете var Sex = $('#Sex').val();, вы получите только первый результат, который появляется первым в DOM. Есть много разных способов, но простой способ получить значения хотел бы, как ...

Примечание: в моем примере женщина уже проверена.

function getRadioValue(name) {
  var inputs = Array.from(document.getElementsByName(name));
  checkedRadio = inputs.filter(x => x.checked);
  if (checkedRadio.length) {
    return checkedRadio[0].value
  }
}

console.log(getRadioValue("Sex"));

<div class="form-check-inline">
  <input type="radio" class="form-check-input" name="Sex" value="Male" />Male
  <input type=radio class="form-check-input" name="Sex" value="Female" checked /> Female
</div>

Answer 3

По умолчанию должна быть выбрана одна радиокнопка.

Answer 4

Похоже, проблема модели данных.

Вы извлекаете значение из вашего html, где Имя равно "Пол". У вас есть два входа с именем, равным «Пол». Jquery выберет первый вход с именем "Sex" из DOM. Таким образом, вы всегда обновляете пол до того значения, которое указано в первом входе с именем «пол».

Это твоя проблема.

Мы можем дать вам правильное решение, если посмотрим, как выглядит ваша таблица для экземпляра БД, в который вы вставляете.