получение значений переключателей при выборе

Question

У меня есть эта форма, и мне нужно знать, какой переключатель был выбран. Вот мой код html. Обратите внимание, что я прочитал множество других полей, таких как phone et c, чтобы уменьшить код.

<form onsubmit="myFunction()" id="myForm" >
    <div class="row">
        <div class="col-md-12  contact-form pt-3">
        <div class="sign-up">
        <h4>SIGN UP</h4>
    </div>
    <h1>web</h1>
    <div class="form-group">
        <input class="form-control" id="uniqueID" name="name" required  formcontrolname="" placeholder="Full Name" type="name" >
    </div>
    <div class="form-group d-flex pt-3">
        <div class="custom-control custom-radio pr-3">
            <input type="radio" id="customRadio1" name="customRadio" value="male" class="custom-control-input">
            <label class="custom-control-label" for="customRadio1" >Male</label>
        </div> 
        <div class="custom-control custom-radio">
            <input type="radio" id="customRadio2" name="customRadio" value="female" class="custom-control-input">
            <label class="custom-control-label" for="customRadio2">Female</label>
        </div>
    </div>
    <div class="pt-4 text-left">
    <button type="submit" class="access-btn">Access Offers</button>
    </div>
</form>

, а вот код javascript для получения значений не в форме. Я мог бы легко извлечь другие значения, но не пол.

function myFunction(){
    event.preventDefault()
    name= document.getElementById("myForm").elements[0].value;
    phone= document.getElementById("myForm").elements[1].value;
    gender=document.getElementById("myForm").elements[7].value; //this does not give any correct output

    debugger;
}

Answer 1

Было бы что-то подобное?

function myFunction(){
  
  var getName = $('input[name="name"]').val();
  var getRadio = $("#myForm").find('input[type="radio"]:checked').val();
  
  $('#result').html('Your name: '+getName+'<br>Genre: '+getRadio);
  
  event.preventDefault();

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form id="myForm" onsubmit="myFunction()">
<div class="row">
<div class="col-md-12  contact-form pt-3">
<div class="sign-up">
<h4>SIGN UP</h4>
</div>
<h1>web</h1>
<div class="form-group"><input id="uniqueID" class="form-control" name="name" required="" type="name" placeholder="Full Name" /></div>
<div class="form-group d-flex pt-3">
<div class="custom-control custom-radio pr-3"><input id="customRadio1" class="custom-control-input" name="customRadio" type="radio" value="male" /> <label class="custom-control-label" for="customRadio1">Male</label></div>
<div class="custom-control custom-radio"><input id="customRadio2" class="custom-control-input" name="customRadio" type="radio" value="female" /> <label class="custom-control-label" for="customRadio2">Female</label></div>
</div>
<div class="pt-4 text-left"><button class="access-btn" type="submit">Access Offers</button></div>
</div>
</div>
</form>
<div id="result"></div>

Answer 2

Позвольте мне подойти с этим ответом

jQuery("input#customRadio1:checked").length;
jQuery("input#customRadio2:checked").length;

Здесь я пытаюсь отфильтровать все элементы моего документа, которые являются элементами ввода JQuery("input, а затем выбрать радиокнопку по идентификатору. должно быть уникальным #customRadio2, наконец, я фильтрую, если он отмечен :checked").

Поскольку de id уникален, длина может быть 0 или 1, если это 1, потому что проверяется, если нет, потому что это нет.

Answer 3

Вы должны дать как ниже

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