Question

Populate input box from data table selection (checkbox)

Forms

Updated February 5, 2019

asked on February 4, 2019

Is there a way to populate an input box from a selected data table (via a checkbox)? This is the simplistic version. The idea is that the user adds the required number of suppliers and select one (the selection could also be done by a higher level user at a later stage).

Once you select the checkbox for a particular supplier, it is supposed to:

Unselect a previous selection (if exist)
Move the selected supplier name to the “Data Row” input box

Not sure why, but the first-row checkbox has to be ticked to get any kind of result which defeats the purpose and is obviously wrong. I can get the id of my selected row (i.e. row 2) but always have to go back to row 1

The classes assigned were:

Data Table = “myTable”

Checkbox section in data table = “dataCbox”

ID for Data Row = “q35”

I started the following code (sorry I know it is still far off - please ignore completely if I’m on the wrong track):

$(document).ready(function() {

$('input[type=checkbox]' && '[class=tableCbox]').click(function(){

$('#q35 input').val("");

getCheckBoxes();

});

var getCheckBoxes = function(){

var result = $('input[type=checkbox]:checked');

if(result.length > 0){

var resultString = result.length

result.each(function(){

var myid = $(this).attr("id");

$('#q35 input').val(myid);

})

}

});

I hope this makes sense.

Thank you for your assistance.

John

Data Table Selection.png (21.61 KB)

| Download

1 0

Answer

SELECTED ANSWER

replied on February 4, 2019

Thank you. Got it right.

1 0

Replies

replied on February 4, 2019

Hi Chris

Thank you so much for the response.

I started by using the code to see how many rows it return. I expected 4 rows in the example below.

I first wanted to make sense of it.

$(document).ready(function() {

$('.myTable').on('click', '.tableCbox', function(){
        var totalRows = $(this).find('tr').length;
    alert(totalRows);
   });
});

The above are the classes defined on the form. I also assume that I must use "$(this).find('tr').length;" as is. What am I missing? Lol - apart from being totally new to jquery - :)

Thank you once again.

Regards, John

Data Table Selection3.png (14.93 KB)

| Download

1 0

replied on February 4, 2019

Did you have to click a checkbox for the alert to pop up?

Is .tableCbox the class that is on the checkbox field in the table?

Also, is the table's class .myTable?

Sorry for the questions. Need to confirm to troubleshoot.

Thanks

0 0

replied on February 4, 2019

You can try changing your code to:

   $('.myTable').on('click', '.tableCbox input', function(){
           var totalRows = $(this).find('tr').length;
         alert(totalRows);
      });   
});

(I added "input" to the cbox filter)

0 0

replied on February 4, 2019 • Show version history

Looks like you are pretty familiar with jQuery, so I'll let you know how I have done something similar. Get the .length of the table's rows and then iterate through the rows. As you iterate through them, populate an array (.push) with all the values of the checkbox column. Once you have the array populated, use an if{} statement to determine your logic and do what you need it to do. Use .inArray to determine if a value is in the array.

One last thing, to the process off, use .on click of the table, but then filter on the checkbox column:

$('.yourTable').on('click', '.yourCheckboxColumn', function(){

 var totalRows = $(this).find('tr').length;
      var allValues = [];
   	  
    for (var r=1; r<totalRows; r++){
         var yourCheck = $(this).find('td:nth-child(1)').closest('tr:nth-child('+r+')').find('td input').is(':checked');
         allValues.push(pCardVal);

    if ($.inArray(true, allValues) > -1){
    //if value is true, do stuff
        stuff();

    }//end for each row
});

Hopefully I understood your description correctly. There may be other methods to get you to comparing all the checkbox values, but this is how I did it once in my short career in Laserficeh Dev :)

Chris

0 0

replied on February 4, 2019

Thank you. Really appreciate it.

0 0

replied on February 4, 2019

any luck?

0 0

SELECTED ANSWER

replied on February 4, 2019

Thank you. Got it right.

1 0

replied on February 5, 2019

Cool, glad I could help you. Hopefully someone later on will find this thread useful as well.

Chris

1 0

You are not allowed to follow up in this post.

Question

Question

Populate input box from data table selection (checkbox)

Answer

Replies

Sign in to reply to this post.