Bootstrap-table: Using table content in a HTML form

[btran1802]

Hi,

I plan to send the contents of the table such as checkbox, radio button via HTML form. Is it possible? Can you show some sample codes?

Thanks,

[ghost]

Hey,

I had the same problem and managed to solve it by adding data-id-field="id" data-select-item-name="abc" to the <table> tag. That'll send a list of selected items that looks like this:

/page?abc=1&abc=2&abc=3

Bootstrap-Table is getting the values from the id column (you can change that by editing data-id-field in the code above). Obviously, you can also change the abc (data-select-item-name) above.

Obviously, you need to have a column with the name you specified in data-id-field for this to work, for example:

<th data-field="id">ID</th>

If you don't want to show the id column, you can use the following code. The class="hidden" is a fallback for users who disabled JavaScript.

<th data-field="id" data-visible="false" data-switchable="false" class="hidden">ID</th>

You can find a full list of variables you can add to the <table> tag in the Table Properties Documentation

I hope that your question is still relevant after 17 days, if not, hopefully it'll help someone else. It took me quite a while to figure out how everything works, so hopefully I can prevent that from happening to others. :smile:

Tip: If you're using PHP, try adding square brackets ([]) to the end of your data-select-item-name. That'll cause PHP to give you an array when you call $_POST['abc'] / $_GET['abc'] instead of the last value. For example, PHP will return something like = array(0 => '1', 1 => '2', 2 => '3') instead of = '3'.

Edit: Since you asked for example code, here's my code. I removed everything that isn't relevant to your question.

<table class="table" data-toggle="table" data-id-field="id" data-select-item-name="people[]">
    <thead>
        <tr>
            <th data-field="state" data-checkbox="true"></th>
            <!-- Remove data-visible, data-switchable and class in the next line if you don't want to hide the ID. -->
            <th data-field="id" data-visible="false" data-switchable="false" class="hidden">ID</th>
            <th data-field="name">Name</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <!-- The next line is a fallback for users without JavaScript. -->
            <td><input type="checkbox" name="people[]" value="123"></td>
            <!-- Remove class in the next line if you don't want to hide the ID. -->
            <td class="hidden">123</td>
            <td>John Doe</td>
        </tr>
    </tbody>
</table>

If you need more help, just leave a comment!

[wenzhixin]

Thanks @Synchunk, your answer is very detailed.

[wenzhixin]

Added to: http://issues.wenzhixin.net.cn/bootstrap-table/#issues/371.html

[ghost]

:heart:

[havok2063]

Hi. I'm having trouble with this example. I've followed your example exactly and it isn't working. I have
data-id-field="id" data-select-item-name="input" inside my table
and my table is inside a form. Inside my form I'm also passing some text input named fitsname. However, during the submit, only the fitsname is getting passed, and my table data that I'm calling "input" (from data-select-item-name="input"), is not getting passed. Any ideas? Thanks.

[ghost]

@havok2063 Can you post the full code somewhere (you can obviously remove parts that aren't necessary to reproduce the issue)?

[havok2063]

Ok, I tried my best to convert it to a nice jsfiddle. https://jsfiddle.net/havok2063/s4v9fbs4/
The form here keeps telling me to use a 'post' request, regardless of whether or not I switch the form method to 'post' or 'get'. So that part isn't working. However, in the real code, it submits the form to my action='writeFits', but only submits the input filename (?fitsname=) , but does not append the table data as (input=&input=...)

I tried to keep everything as much the same as I could. I simplified the table, and changed the javascript so it could run in jsfiddle.

[havok2063]

Have you had a chance to look at this yet? I still can't get it to work right. Any help would be appreciated. Thanks.

[ghost]

@havok2063 It works for me, after removing the $(function(){ ... }) around the other functions. I try to avoid using JavaScript whereever possible, so I don't really know what that does...
When clicking on _Write FITS_, it redirects me to

http://localhost:8081/writeFits?fitsname=test&btSelectAll=on&input=1&input=4

I would send you a link to the JSFiddle, but for some reason it decided to break completely...

[havok2063]

That's weird. It doesn't work for me. In the real code, I don't have the $(function(){..}) around the code either. They just exist as standalone functions. So it should work but it's not. Where is the SelectAll=on coming from? Can you somehow send me the snippets of this code that you got working?

[ghost]

Here's the code I used: bootstrap-table-problem.html _(deleted)_

| Name | Version |
| --- | --- |
| Bootstrap | 3.3.1 |
| bootstrap-table | 1.5.0 |
| jQuery | 1.11.1 |
| normalize.css | 3.0.2 |

Note: The code contains a few unnecessary dependencies (like jQuery UI), which is because I copied the base HTML from a different project. That shouldn't be related to the issue, though.

[havok2063]

Hmm. Ok. I just tried your code exactly, except linking it to my version of bootstrap, jquery, and bootstrap-table, and it doesn't work. The url only returns writeFits?fitsname=firsttest.fits and no table parameters. I'm using

Name	Version
Bootstrap	3.3.2
Bootstrap-Table	1.6.0
Jquery	1.11.2

Could this be a bug introduced between bootstrap-table versions?

[ghost]

I upgraded bootstrap-table and jQuery, still working...
What browser are you using?

[havok2063]

Chrome Version 40.0.2214.111

[ghost]

Can you try using Firefox?

[havok2063]

Same problem. Tried Firefox 23.01, then updated and tried 36.0. Only returns writeFits?fitsname=first and nothing else.

[ghost]

I'm confused... are you using a web server or a file:/// URL?

[havok2063]

I just meant that I updated my Firefox browser to the latest version and tried again, and got the same results. I'm loading your html code as a file:/// ; with the links to all the js and css pointing to my local versions. Then running it to see what the returned link is when I click the Submit button.

It tries to navigate to writeFits?fitsname=first but since I don't have it plugged into my Flask web-app it doesn't recognize the writeFits method. But it still is not passing anything other than fitsname. Shouldn't the request be something like

writeFits?fitsname=first&input=a&input=b&input=c etc..

My original code that I do have running on the web server, which looks the same as yours, is still in place, and also does not work. It only passes fitsname= in the request.

[ghost]

I just tested it with file:/// (usually I'm using a web server), which works completely fine.
I'm out of ideas :frowning:

[havok2063]

Nooooo! Haha.. Sigh.. I don't understand it. :frowning: I'll try it on my laptop and see if that makes any difference. Thanks for your help. I really appreciate it.

Update: No such luck on the laptop.

@wenzhixin Do you have any thoughts on this?

[havok2063]

I also just tried plugging in the same table from your code into my web server, and it also didn't work. Still only requests the one fitsname parameter.

[wenzhixin]

Just said like @Synchunk, https://jsfiddle.net/s4v9fbs4/4/, we can see:

[havok2063]

Well just showing me that it works for you doesn't really help me. As @Synchunk and I have been discussing, we have been using the same code, which is the same as yours, and it does not work for me. At least @Synchunk tried to help me. I don't know what the problem is and I'm out of ideas. What I was asking was if you had any ideas on why it might work for him and not for me? Sorry for the confusion on my question.

Also it looks like the table form only sends one column, the id, through the form? Is this correct? Presumably this is because data-id-field is used to specify which column to send? I'm actually looking for a way to send the entire table to the server in the request so I can export it as a FITS file. The response should just be the header to download the file via the browser.

Ajax and Jquery don't work because it doesn't handle my file download response. Thus my attempts at sending the data via a form.

[serlogo53]

hi wenzhixin
i need your help.

https://jsfiddle.net/s4v9fbs4/4/

in this example (old post) used tag. i can use this wit jquery data table perfect. but
in botstrap data table with jsondata datasource everything halt. please can you help me.

i am tring to do :+1:
row selected or checked table with json data.
and when i select row with a button i want to make some function.

1. can edit row in modal page (with ajax(if i take this some value i can do everything))
2. alert(selected rows.field)
3. delete(selected row)

i think firstly i need selected row.field(...) value
later
i will try to collect more selected row.field (with checkbox stye)

i hope i explained.

thank you.

i will wait your answer..

[wenzhixin]

Hi @serlogo53 , I think the examples: http://issues.wenzhixin.net.cn/bootstrap-table/ maybe can help you.

[serlogo53]

hi wenzhixin.
i checked all your example and so hard for me. my wants very clear. if you make my example buttons events everything will very good. along 1 week i am working to fix but nothing. (if i not use json data and use data source everything is ok. but it's not usefull.) in this example is it possible to make?

best regards.

        <button id="cikis_yap" class="btn btn-default btn-success"  data-toggle="modal" 
data-target="#myModal" >EDİT ROW</button>

        <button id="button1" class="btn btn-default btn-success"   >SHOW SELECTED ROW FIELD ..[].. </button>
        <button id="button1" class="btn btn-default btn-success"   >SHOW CHECKED ROWS FIELD ..[].. </button>

         <button id="button2" class="btn btn-default btn-success"   >DELETE SELECTED ROW</button>

         <table 
         id="table" 
           data-toggle="table"
           data-url="sample.json"
           data-show-refresh="true"
           data-show-pagination-switch="true"
           data-page-size="50"
           data-page-list="[50, 100, 200]"  
           data-search="true"
           data-sort-name="tanim_adi" 
           data-sort-order="asc"
           data-click-to-select="true" 
           data-select-item-name="f_id"

               data-height="600"
             data-pagination="true"

                data-query-params-type=""
               data-query-params="queryParams"   >
            <thead>

            <tr>

                    <th class="col-sm-1" data-field="hareket_id" data-checkbox="true" data-visible="true"></th>

                <th  class="col-sm-2" data-field="field1" data-sortable="true">f1</th>
                <th  class="col-sm-2" data-field="field2" data-sortable="true">f2</th>
                <th  class="col-sm-4" data-field="field3" data-sortable="true">f3</th>
                <th  class="col-sm-2" data-field="field4" data-sortable="true">f4</th>
                <th  class="col-sm-6" data-field="field5" data-sortable="true">f5</th>
            </tr>
            </thead>
        </table>

[wenzhixin]

You can try this:

• define your custom function showModal(row); to show the row form.
• use getSelections method.
• user remove method.

Hope to help.

[serlogo53]

i send a mail "[email protected]". i will wait your help :-)

[serlogo53]

after getselections method i think we need to crop sentences. i think it's not possible to take just one field?

[Lreus]

Answer is old but gold, thanks a lot