Question posted in
You can find the official documentation here.

Jquery ajax – How do i get my checked value in array from my input in ajax

im trying to get my checked input value from my ajax but it only return my first tick…here is my code 

function getBranchAjax(cuid, stid) {
    $.ajaxSetup({
        headers: {
            'X-CSRF-Token': $('meta[name=csrf-token]').attr('content')
        }
    });
    $.ajax({
        url: "{{ route('reporting.getBranchAjax',['cuid','stid']) }}",
        method: 'GET',
        data: { cuid: cuid, stid: stid },
        dataType: 'json',
        success: function (data) {

            console.log(data);
            console.log(data.branch.length);


            //remove all option except the first option the append with new option
            //remove all option except the first option the append with new option
            for (var x = 0; x < data.branch.length; x++) {
                //console.log(data.branch[x].cb_branch_Name);
                $('#brRecord').append(`<tr><td style='width: 110px; text-align: left;'>${data.branch[x].cb_branchcode}
    </td><td style='width: 600px; text-align: left;'>${data.branch[x].cb_branch_Name}</td>
     <td style='width: 20px;'> 
    <input type="checkbox" class="ss" name="ss" id="ss" value="${data.branch[x].cb_branch_Name}" /></td><td>

                                    </td></tr>`);

            }


        },
        fail: function (xhr, textStatus, errorThrown) {
            alert('request failed');
        }
    })
}

Get value by class name which is only return value of my first tick

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

console.log(checkedValue); // only return a value of my first tick

I expect to get more value based on my input tick value

Tags:

2

Answers


  1. 0

    It is because you add a break in your for loop.

    Removing it will solve your problem.

    for(var i=0; inputElements[i]; ++i){
        if(inputElements[i].checked){
            checkedValue = inputElements[i].value;
        }
    }

    If you want to get all the latest clicked checkbox you can use onChange

    function checkedInput() 
{
 cosnt checkedValue = [];
 for(var i=0; inputElements[i]; ++i){
        if(inputElements[i].checked){
            checkedValue.push(inputElements[i].value);
        }
    }
  return checkedValue ;

}

$(document).on('change', '#ss', function () {
 console.log(checkedInput());
})
    Login or Signup to reply.
  2. 0

    Multiple values would need to be held in an Array (or similar).

    For example: 

    var checkedValues = Array.from(document.getElementsByClassName('ss')).filter(el => el.checked).map(el => el.value);

console.log(checkedValues);

    Or, since the question is tagged jQuery:

    var checkedValues = jQuery('.ss:checked').get().map(el => el.value);

console.log(checkedValues);

    With the values in an array, you can then do whatever you want with them, eg display them or perform some transform on them.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search