Get the checked value of a radio button in javascript

Question

0.00/5 (No votes)

See more:

Hi
In my HTML table i want to get the checked value for each row in my table, but it keeps returning false even know that i am selecting it

What I have tried:

$(document)
.ready(function () {
 
    var myUrl = $("#myUrl").val();
    var arrayDetails = new Array();
    var row = 1;
 
    function NewEntry(area, process, value1, value2, value3, comment) {
 
        this.Area = area;
        this.Process = process;
        this.Value1 = value1;
        this.Value2 = value2;
        this.Value3 = value3;
        this.Comment = comment;
    }
 
// dropdown change
 
    $('#ProList').on('change', function () {
 
        var selectedValue = $('#ProList').val();
 
        $.ajax({
            type: "GET",
            url: myUrl1,
            contentType: "application/json; charset=utf-8",
            datatype: JSON,
            data: { 'proList': selectedValue },
            success: function (result) {
 
                $("#mainData").empty();
 
                $.each(JSON.parse(result), function (i, item) {
                    var row = i + 1;
 
                    $("#mainData").append(
                        "" +
                        "" + item.Process + "" +
                        "" + item.Checks + "" +
                        "" +
                        "<div class="btn-group" data-toggle="buttons" "="" +="">" +
                        "<label class="btn btn-success" "="" +="">" +
                        "<input type="radio" name="options1" id="green_" + row + "" "="" +="">" +
                        "<span class="glyphicon glyphicon-ok" "="" +=""></span>" +
                        "</label>" +
 
                        "<label class="btn btn-warning" "="" +="">" +
                        "<input type="radio" name="options2" id="yellow_" + row + "" "="" +="">" +
                        "<span class="glyphicon glyphicon-ok" "="" +=""></span>" +
                        "</label>" +
 
                        "<label class="btn btn-danger" "="" +="">" +
                        "<input type="radio" name="options3" id="red_" + row + "" "="" +="">" +
                        "<span class="glyphicon glyphicon-ok" "="" +=""></span>" +
                        "</label>" +
 
                        "" +
                        "<textarea id=" + " '"="" +="" "comments_"="" row="" "'"="" "type="text" placeholder="" class="form-control input-md"></td>" +
 
                        "</tr>");
                });
            },
            error: function () {
            }
        });
 
    });
 
// submit event
 
<pre>   $("#subButton").click(function () {
 
        var rowCount = $('#mainData >tr').length;
 
        for (var i = 1; i <= rowCount; i++)
        {
            var areaEntered = document.getElementById("process_" + i).innerText;
            var processEntered = document.getElementById("checks_" + i).innerText;
 
            var valueEntered1 = document.getElementById("green_" + i).checked;
            var valueEntered2 = document.getElementById("yellow_" + i).checked;
            var valueEntered3 = document.getElementById("red_" + i).checked;
 
            var commentEntered = document.getElementById("comments_" + i).value;
 
            var entry = new NewEntry(areaEntered, processEntered, valueEntered1, valueEntered2, valueEntered3, commentEntered);
 
            arrayDetails.push(entry);
        }
 
        sendToController();
    });
 
    function sendToController() {
        $.ajax({
            type: "POST",
            url: myUrl,
            contentType: "application/json; charset=utf-8",
            datatype: JSON,
            data: JSON.stringify({ methodParam: arrayDetails }),
            success: function () {
                alert(" Click Ok to return");
            },
            error: function () {
                alert(test);
            }
        });
    }
});</textarea></div>

Posted 2-Nov-17 23:01pm

Member 11596389

Updated 7-Nov-17 0:59am

v3

Add a Solution

Comments

Karthik_Mahalingam 3-Nov-17 6:12am

post the markup code of the table

Member 11596389 3-Nov-17 6:17am

i have added this below

Karthik_Mahalingam 3-Nov-17 6:26am

try calling this code

$("#subButton").click(function () {
 
               var rowCount = $('#mainData >tr').length;
 
               for (var i = 1; i <= rowCount; i++)
               {
                   var areaEntered = document.getElementById("process_" + i).innerText;
                   var processEntered = document.getElementById("checks_" + i).innerText;
 
                   var valueEntered1 = document.getElementById("green_" + i).checked;
                   var valueEntered2 = document.getElementById("yellow_" + i).checked;
                   var valueEntered3 = document.getElementById("red_" + i).checked;
 
                   var commentEntered = document.getElementById("comments_" + i).value;
 
                   var entry = new NewEntry(areaEntered, processEntered, valueEntered1, valueEntered2, valueEntered3, commentEntered);
 
                   arrayDetails.push(entry);
               }
 
               sendToController();
           });

at the last line of success event in the ajax call.

Member 11596389 3-Nov-17 8:59am

sure this is the same code??

Karthik_Mahalingam 3-Nov-17 9:02am

run this code in the console window and see whether you are getting the value
document.getElementById("process_1").innerText;

Member 11596389 3-Nov-17 9:09am

yes im getting the correct id for each of the elements in my table

Karthik_Mahalingam 3-Nov-17 9:12am

place an alert and check whether the click event is registered
$("#subButton").click(function () {
alert('hi');

Member 11596389 3-Nov-17 9:17am

karthik

the click event is registered, this is not the problem, the problem is im getting a value of false back when it should be true

thanks

Karthik_Mahalingam 3-Nov-17 9:29am

ok
if you run in this in console what value you are gettting, true or false
document.getElementById("green_1" ).checked;

Member 11596389 3-Nov-17 9:37am

the value im getting is false, and it should be true because its been checked

thanks

Karthik_Mahalingam 3-Nov-17 9:48am

is that radio button list or checkbox?
be more specific,
you code shows as type="radio" but the questions says checkbox

Member 11596389 3-Nov-17 10:12am

sorry Karthik it is a radio button, do i need to do it a different way

Karthik_Mahalingam 3-Nov-17 12:50pm

you need to select only one option or 3?
if it is radio button you cannot uncheck individually

Member 11596389 7-Nov-17 3:41am

Karthik, i need to just select one option

Karthik_Mahalingam 7-Nov-17 4:08am

refer this and see what mistake you have done
radio button[^]

Member 11596389 7-Nov-17 6:49am

Hi when i change the input type a checkbox it works the way i want it to work, only thing users can select more than one option. it just doesn't like the radio buttons for some reason, checking the data the last row in the table is giving the correct value but the other rows are not

Karthik_Mahalingam 7-Nov-17 6:54am

ok wil post the solution.

Member 11596389 7-Nov-17 6:54am

thanks

F-ES Sitecore 3-Nov-17 6:19am

Your code is fine so check the markup, ensure there is a checkbox with an id of process_1 etc and only one with that id.

Member 11596389 3-Nov-17 6:24am

yeah i have checked this, the ids match

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Karthik_Mahalingam · Answer 1 · 2017-11-07T00:59:00

make the name property same to all the radio button to group it.

<input type=" radio" name="Colors" id="green_" + row + "" "=" " +=" ">"
     "<input type=" radio" name="Colors" id="yellow_" + row + "" "=" " +=" ">" +
     "<input type=" radio" name="Colors" id="red_" + row + "" "=" " +=" ">"