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"

Can you please provide a fiddle or something? – void Feb 21 '15 at 20:35 — void, Feb 21 '15 at 20:35

score 1 · Answer 1 · answered Feb 21 '15 at 21:12

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

Thanks this worked! In the demo you will notice there is a section for ` .on('uncheck.bs.table', function (e, row)` do you know how i can remove the input after i uncheck each box? — iamthestreets, Feb 22 '15 at 00:48

Artur Filipiak · Accepted Answer · 2015-02-22T22:54:07.487

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

Thanks. Although this works in the demo it does not work for me when i add it to my code. — iamthestreets, Feb 22 '15 at 00:47
@iamthestreets , what do you mean *not works*? I cannot find anything why it would't work. With `.map()` you're making unnecessary calculations for selecting rows. You need the `.map()` to gather the rows for deletion, not for selecting rows. You have actually 2 other problems with your code (inputs `id` and `name`)... See: [**DEMO**](https://jsfiddle.net/cL79L6d3/) — Artur Filipiak, Feb 22 '15 at 10:06

Create hidden input for each checkbox that is checked

2 Answers2