how to get the value of a radio button that is in a label in div inside document.ready

Question

I know there are similar questions, but none of the answers worked for me. I am not that savvy with web development being primarily a data engineer. The following is a snippet of the code that contains the radio button.

<div class="mb-5 mt-3">
    <label class="fs-6 form-label fw-bold m-darkgreen text-dark">Ranking
        Parameter</label>
    <div class="nav-group nav-group-fluid">
        <label>
            <input name = "Prioritize" type="radio" class="btn-check" name="type" value="Size"
                checked="checked" id="PriorityBySize">
            <span
                class="btn btn-sm btn-color-muted btn-active btn-active-primary fw-bold px-4">Size</span>
        </label>
        <label>
            <input name = "Prioritize" type="radio" class="btn-check" name="type" value="Vulnerability" id="PriorityByVulnerability">
            <span
                class="btn btn-sm btn-color-muted btn-active btn-active-primary fw-bold px-4">Vulnerability</span>
        </label>
    </div>
</div>

Based on it, I am trying to get the value associated so that I can perform different SQL queries. But the value grab in document.ready function is not working. Also, console.log is not outputting in my document.ready function. Here is the tried code:

if ($("#PriorityByVulnerability").is(":checked")) {
    var priorityText = "Vulnerability"
} else {
    var priorityText = "Size"
}
console.log(priorityText)

$("input[name='Prioritize']").on("change", function() {
    var priorityText = $('input[name="Prioritize"]:checked').val();
    console.log("the sign is: " + sign);
    //I want the variable sign to be the value of the radio button clicked
  });


priorityText = $("#mb-5 mt-3").change(function() {
                    if ($(this).is(':checked')) {
                        alert($(this).val())};
                    })

None of these work and I have been running in circles. I need to pass the value to my router.post function so that I can use it with a query.

Answer 1

Your issue is two fold. You'll need to clean up your code as there are many spaces and additional characters.

In addition your have two "Name" elements for each input. You'll need to only have a single "Name" for each. Also your HTML name will need to be unique to the input.

You may need to write a function to handle what information you want, but if you run the following you'll see it works.

This is a sample of the corrected HTML

<div class="mb-5 mt-3">
    <label class="fs-6 form-label fw-bold m-darkgreen text-dark">Ranking
        Parameter</label>
    <div class="nav-group nav-group-fluid">
        <label>
            <input name="Prioritize1" type="radio" class="btn-check" value="Size" checked="checked" id="PriorityBySize">
            <span
                class="btn btn-sm btn-color-muted btn-active btn-active-primary fw-bold px-4">Size</span>
        </label>
        <label>
            <input name="Prioritize2" type="radio" class="btn-check" value="Vulnerability" id="PriorityByVulnerability">
            <span
                class="btn btn-sm btn-color-muted btn-active btn-active-primary fw-bold px-4">Vulnerability</span>
        </label>
    </div>
</div>

// Alert the value of the first radio
alert($('input[name="Prioritize1"]').val());

If for some reason you cannot adjust the HTML, then you can call each input by the ID using this.

alert($('input#PriorityBySize').val());

or

alert($('input#PriorityByVulnerability').val());

To answer your question more accuractly you can do something like this.

if($('input#PriorityBySize')[0].checked){

alert("Priority Size is checked");
var Prioritybysize = $('input#PriorityByVulnerability').val();
}else{};

You may even consider doing a switch statement for the two along with a

.change(function(){

// Some switch

})