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

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 + "" "=" " +=" ">"

Get the checked value of a radio button in javascript

1 solution

Solution 2

Add your solution here

Preview 0

Get the checked value of a radio button in javascript

1 solution

Solution 2

Add your solution here

Preview 0

Existing Members

...or Join us