переключатель значения ввода значения javascript

Question

У меня есть переключатель типа ввода для пользователя, чтобы выбрать одно значение, например, пол. Проблема заключается в значении, которое я получаю только для первого варианта, и когда я проверяю, я получаю предупреждение типа [DOM] Found 2 elements with non-unique id. Мне нужно значение, чтобы я мог передать его в базу данных с ajax.

$('#register').on('click',function(){
  var gender=$('#gender').val();
  console.log(gender);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="get" id="task-form">
   <table class="table">
    <tr>
       <td><input type="radio" name="gender" id="gender" value="male"> Male</td>
       <td><input type="radio" name="gender" id="gender" value="female"> Female</td>
    </tr>
    
    <tr>
      <td><button type="button" class="btn-primary" value="Submit" id="register">Register</button></td>
    </tr>
  </table>
</form>

Знаете, что мне нужно, чтобы это исправить?

Спасибо

Answer 1

Атрибут id должен быть уникальным в документе, вместо него можно использовать class .

You может использовать атрибут name вместе с :checked как часть селектора.

$('#register').on('click',function(){
  var gender=$('[name=gender]:checked').val();
  console.log(gender);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="get" id="task-form">
   <table class="table">
    <tr>
       <td><input type="radio" name="gender" class="gender" value="male"> Male</td>
       <td><input type="radio" name="gender" class="gender" value="female"> Female</td>
    </tr>
    
    <tr>
      <td><button type="button" class="btn-primary" value="Submit" id="register">Register</button></td>
    </tr>
  </table>
</form>

Answer 2

Вы можете попробовать этот способ, чтобы достичь этого

$('input[name=gender]:checked').val();

$('#register').on('click',function(){
  var gender= $('input[name=gender]:checked').val();
  console.log(gender);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="get" id="task-form">
   <table class="table">
    <tr>
       <td><input type="radio" name="gender" id="male" value="male"> Male</td>
       <td><input type="radio" name="gender" id="female" value="female"> Female</td>
    </tr>
    
    <tr>
      <td><button type="button" class="btn-primary" value="Submit" id="register">Register</button></td>
    </tr>
  </table>
</form>

Answer 3

Любые два или более элемента на странице не могут иметь одинаковые ID .

Вы указали id="gender" в полях ввода.

Вы можете указать идентификаторы как id="m" ( или id="male") и id="f" ( или id="female")

Затем вы можете name атрибут пользователя получить значение выбранного радиокнопки.

В ванили javascript

var gender = document.querySelector('input[name = "gender"]:checked').value;

Answer 4

Вы не можете иметь одинаковые ID для двух разных тегов.

Вы можете изменить функцию jQuery, чтобы использовать атрибут имени для извлечения значения, как показано ниже

var gender = $("input[name = 'gender']").val();