Create hidden input for each checkbox that is checked

Question

I am trying to create a hidden input inside of a form for each row that is checked and I want to insert the value of each hidden input with the ids that are from a hidden column.

Here is what i have so far:

.on('check.bs.table check-all.bs.table', function (row) {           
        var selects = $('#users-table').bootstrapTable('getSelections');
            ids = $.map(selects, function (row) {
                return row.id;                          
            });                 
                    var input = document.createElement("input");
            input.setAttribute('type', 'hidden');           
            input.setAttribute('name', 'delete['+ids+']');
            input.setAttribute("id", 'delete['+ids+']');            
            input.setAttribute('value', 'delete['+ids+']');         
            //append to form element that you want .
            document.getElementById("deleteModalForm").appendChild(input);  
        })

It is creating a new hidden input for each box that is checked like I want it to, but the problem I am having is that it is joining the ids together. Here is an example of whats happening:

<input value="delete[3]" id="delete[3]" name="delete[3]" type="hidden">
<input value="delete[3,2]" id="delete[3,2]" name="delete[3,2]" type="hidden">

What i want it to do is this:

<input value="delete[3]" id="delete[3]" name="delete[3]" type="hidden">
<input value="delete[2]" id="delete[2]" name="delete[2]" type="hidden">

If it helps I am using Bootstrap Data Table

Can someone please help me with this?

EDIT: Here is a JSFiddle . As you check the box it will add a new input and you will see that each input joins the numbers. For this example I did not use type="hidden"

Answer 1

I took the top most star using stars.pop()

Updated Code

 .on('check.bs.table', function (e, row) {
        var selects = $table.bootstrapTable('getSelections');
            stars = $.map(selects, function (row) {
                return row.stargazers_count;                          
            }); 
            stars = stars.pop();
            var input = document.createElement("input");
            input.setAttribute('type', 'text');           
            input.setAttribute('name', 'delete['+stars+']');
            input.setAttribute("id", 'delete['+stars+']');            
            input.setAttribute('value', 'delete['+stars+']');         
            //append to form element that you want .
            document.getElementById("deleteModalForm").appendChild(input);  
        $result.text('Event: check.bs.table');
    })

Working Fiddle

Answer 2

Why not just use row.stargazers_count directly?

row is an object of currently selected row, row.stargazers_count represents row value of data-field='stargazers_count' column.

input.setAttribute('value', 'delete['+row.stargazers_count+']');

DEMO

getSelections do the same job but it takes all selected rows into object, so that you have to extract the last one :

var selects = $table.bootstrapTable('getSelections');
var stars   = selects[selects.length-1].stargazers_count;
input.setAttribute('value', 'delete['+stars+']');

But it's unnecessary operation on array, since you have a row right on your hand, and for that purposes you're passing it to the event:

.on('check.bs.table', function (e, /* here it is: */ row){

---

You have more problems with your code:

• This ain't gonna work, as you repeating inputs names:

   input.setAttribute('name', 'delete['+row.stargazers_count+']'); 

  use this instead, it will create array of names automatically on submit:

   input.setAttribute('name', 'delete[]'); 

• This ain't gonna work also, because you repeating inputs id (they have to be unique):

   input.setAttribute("id", 'delete['+row.stargazers_count+']'); 

  use row.id instead:

   input.setAttribute("id", 'delete_'+row.id); 

---

Why it is joining the ids together?

.map() Translate all items in an array or object to new array of items .

Reference