Get php selected checkbox values in JAVASCRIPT

Question

Im new to Javascript and i cannot solve this . I have a checkbox form , so i need to get the selected value(s) and post to a php file .

Here is the script :

<script>
                $("#addusers").click(function(){

                    var checkedValue = null;
                    var inputElements = document.getElementsByClassName('values');
                    for(var i=0; inputElements[i]; ++i){
                        if(inputElements[i].checked){
                            checkedValue = inputElements[i].value;
                            break;
                        }
                    }

                    $.post("users_add.php", {
                        checkedValue:checkedValue

                    }, function(data) {
                        alert(data);
                    });
                });
            </script>

Here is the php code :

<td>
                                <div>
                                    <?php
                                    foreach($userProfiles as $u)
                                    {
                                        foreach($u as $x)
                                        {
                                            echo "<input type=\"checkbox\" name=\"values\"> $x";
                                            echo "<br>";
                                        }
                                    }
                                    ?>

                                </div>
                            </td>

Im checking print_r($_POST) post variables , but it isnt showing anything. Is my javascript okay ?

Answer 1

Don't worry about being new to javascript, we all start sometime. Regarding your code, first of all your "for cycle" is saving the first value then skipping, i know you are not receiving anything yet but i'm guessing you will get only one value. The most reasonable cause for not getting anything posted is that you are not using the right selector. For instance:
var inputElements = document.getElementsByClassName('values');
will retrieve all html elements that look like this:
<input type="text" class="values" />
Oh sorry i just noticed you did post your html code, since you are already using jQuery there is no need to mix it with vanilla javascript, here is the corrections i found for your code:

            var checkedValues = [];
            var inputElements = $('input[type="checkbox"]');
            inputElements.each(function () {
                if($(this).is(':checked')){
                    checkedValues.push($(this).val());
                }
            });                

Explanation:
var checkedValues = [];
This way we declare an Array in javascript so we can access the array method "push" to insert elements as they meet our condition (checkbox that are checked).

var inputElements = $('input[type="checkbox"]'); This is a jQuery selection of the elements of the DOM, we are saying "get all the input elements which have an attribute of type=checkbox. You can learn more about jquery selectors in their oficial site: https://api.jquery.com/category/selectors/

inputElements.each(function () {
    if($(this).is(':checked')){
        checkedValues.push($(this).val());
    }
});

This bit does a few things
inputElements.each(function(){});
This will execute a function "for each" element in the inputElements selection. You can get more info about jQuery.each in the official doc: https://api.jquery.com/each/

if($(this).is(':checked'))
This if asks if the current element in the loop has the "checked" attribute set. We use $(this) to convert the pure DOM element we got from the original selection into a jQuery object to use the "is" method.

checkedValues.push($(this).val());
Here we add the VALUE of an element that has the checked attribute set, not the element, not the boolean, but whatever is set in the "value" property of the input.

Anything that it isn't clear or it isn't working feel free to ask, and happy coding! :)