Radio Button returning “undefined” value

Question

I'm trying to write a program where the user clicks a radio button with a choice. When they press submit, it takes them to a page that changes based on the radio button clicked. I'm supposed to use node.js and an ejs template and the radio button keeps returning undefined. How do i get the radio button to return a value, then how do i get the page to display a unique text based on that value?

I've been working on this for several days and no solution seems to work.

        <input name="imagePick" value="2" type="radio" id="two" onclick="javascript:check();">
        <label for="two">
            <img src="images/taurus.png" alt="taurus" height="150" width="auto">
        </label>

        <input name="imagePick" value="3" type="radio" id="three">
        <label for="three">
            <img src="images/cancer.jpg" alt="gemini" height="150" width="auto">
        </label>

var sign = $('input[name="imagePick"]:checked').val();
console.log("the sign is: " + sign);

//I want the variable sign to be the value of the radio button clicked

Answer 1

Your code is working fine. In the below snippet, the code is the same as yours, except I replaced your onclick by an onchange handler on both of the radio buttons.

Your initial code as is is also working (for the one radio button that has an onclick handler attached to it, that is).

So, as Adriano commented, it is possible that your jQuery libraries are not loaded correctly.

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

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input name="imagePick" value="2" type="radio" id="two"> <label for="two"> <img src="images/taurus.png" alt="taurus" height="150" width="auto"> </label> <input name="imagePick" value="3" type="radio" id="three"> <label for="three"> <img src="images/cancer.jpg" alt="gemini" height="150" width="auto"> </label>