Send radio button value using Ajax Script in

Question

I am trying to send the radio button value to Controller via ajax request, and so far nothing works

<input class="form-check-input" type="radio" class="gender" name="gender" id="Female" value="Female">
<label class="form-check-label" for="Female">Female</label><br>

<input class="form-check-input" type="radio" class="gender" name="gender" id="Male" value="Male">
<label class="form-check-label" for="Male"> Male </label><br>

<input class="form-check-input " type="radio" class="gender" name="gender" id="Other" value="Other">
<label class="form-check-label" for="Other">Other</label><br>

I tried with the following methods that do not work for me:

$('.gender:checked').val();

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

$('#gender').val();

Any help?

Answer 1

You should be responding to an event for example a click or an onchange event see more here:

<input class="form-check-input" type="radio" class="gender" name="gender" id="Female" value="Female" />
<label class="form-check-label" for="Female">Female</label><br>

<input class="form-check-input" type="radio" class="gender" name="gender" id="Male" value="Male" />
<label class="form-check-label" for="Male"> Male </label><br>

<input class="form-check-input " type="radio" class="gender" name="gender" id="Other" value="Other" />
<label class="form-check-label" for="Other">Other</label><br>

$("input[type='radio']").click((ev) => {
    console.log("click",ev.currentTarget.attributes.value.value);
})
$("input[type='radio']").change((ev) => {
    console.log("change",ev.target.attributes.value.value);
})

jsfiddle

Answer 2

In order to identidy the value of each field, use #id instead of .ClassName,

    $('#Female:checked').val();
    $('#Male').val();
    $('#Other').val();

otherwise, you can use radio buttons