How to pass same class/id name php values from radio button to javascript?

Question

This is my problem. I am looping items from the database that contains items name and id. I have a radio button for each items. The id of that item is stored in the radio buttons value ....Now what i want to achieve is when i click on the submit button,it will call a function call save() in javascript and save all the selected items ONLY .... i've been trying this for hours but i cant get it worked.

Here are my codes....

When i do my while looping from the DB, it will display the radio button and the items name...

<?php
    $retrieveQuery = "SELECT * FROM `itemdb` WHERE `approve`= 1 AND `userId` = '$userId';";
    $retrieveresult = mysqli_query($dbconnect, $retrieveQuery);
    if(mysqli_num_rows($retrieveresult) > 0)
    {                                                   
        while($retrieverow = mysqli_fetch_assoc($retrieveresult))
        {
?>
            <p>&nbsp;</p>                                                       
            <div style="background-color: rgba(0, 0, 0, 0.16);">                                                                
                <input style="margin-bottom: -19px;" type="checkbox" class="item" name="item[]" value=<?php echo $retrieverow['itemID'] ?>>
                <p style="margin-left: 26px;"><?php echo $retrieverow['itemName'] ?></p>
                <p style="margin-top:-10px;margin-left:28px"><i><?php echo $retrieverow['category'] ?></i></p>
            </div>                                                                                                          
<?php
        }                                                   
    }
    else
    {
        echo "Test : There is no approve Items to be displayed";
        echo "Either wait for the admin to approve or upload items to start Trading ! ";
    }
?>

This is my script:(How can i save my items?)

function save()
{
    var f = document.getElementsByClassName('item').value; //my own items chosen frm invntry
    xmlhttp.onreadystatechange = function(){
                        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                            document.getElementById("confirmTrade").innerHTML = xmlhttp.responseText;
                        }
                        };
                        xmlhttp.open("POST","trade.php?f="+f,true);
                        xmlhttp.send();
}

Right after i click the save() function it will send the data to another page using ajax method....

PS: Everything works fine...Other variables are passed successfully but only one item variable is being passed ....

Thanks in advance!

Answer 1

Without looking into it too much, take a look at this line:

var f = document.getElementsByClassName('item').value;

document.getElementsByClassName gets an HTMLCollection of elements, so calling value on this doesn't make much sense. You'll need to loop through them and find the selected ones. I have it building an array then joining it into a comma separated list:

var checkboxes = document.getElementsByClassName('item');
var f = [];

for(var i = 0; i < checkboxes.length; i++){
   if(checkboxes[i].checked == true)
       f.push(checkboxes[i].value);
}

f = f.join();//makes comma seperated list

//proceed with ajax call