getting values of radio buttons on selection

Question

I have this form and i need to know as which radio button has been selected. Here is my html code.Please note that i have read of lot of other fields such as phone etc to reduce code.

<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>

and here is the javascript code to get values out of form.I could extract the other values easily but not the gender value.

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

You should give like below

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

Answer 2

Would it be something like that?

 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 3

Let me aproach with this answer

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

What I'm trying to do here is filter all elements of my document that are Input elements JQuery("input and then select my radio button by id, it should be unique #customRadio2 , finally I filter by if it's checked :checked") .

Because de id is unique the length can be 0 or 1, if it's 1 is because is checked if not is because it is not.