bootstrap-select: Bootstrap select doesn't send field data on form submit

@carlituxman Hi, I actually removed my post, because I noticed the others had the right name. It seems it’s another problem. You should still check

• <select name="somename[]">
• <option value="uniqueValue">
• if the fields are inside the form (between the form tags)
• when the fields are in a <fieldset> tag don’t forget the form="yourForm" attribute I worked through my problem with these steps.

I was Facing same the problem 😟 after banging head with a head ache !FINALLY got solution at first i was using <-form->/ tag over the <-tr-> but when i placed from tag inside <-tr-> i.e over the selectpicker it worked for me (quite strange 😖 )

So what i changed!!

---

from :

<-form method=“post” action=“target”> <-tr> <-td><-select class=“selectpicker” name=“select[]” multiple></select> <-/tr> <-/form>

---

TO: <-tr> <-td> <-form method=“post” action=“target”> <-select class=“selectpicker” name=“select[]” multiple></select> <-/form> <-/td> <-/tr-> 👍 😄

I test some options but only fails inside a table. Without table it works

I have the same problem… everything in the form works great but when I only add the one class called “selectpicker” it just do not send the selected option value in the $_POST-variable… nada… removing the class makes it work again and I get my desired variable in the $_POST and I can use it as before.

Very strange bug indeed. To bad, I just found the plugin and seems like a good one, except that I can’t really use it.

Using Chrome 56.0.2924.87

Hello, all I found the alternate way please check and suggest,

1. js is able to get value from bootstrap-select.
2. Get the value using jquery and assign it hidden field which will pass the value.

<form method="post">
<select  class="selectpicker" id="selectpicker" data-live-search="true" `data-max-options="">
<option value="India">india</option>
        <option value="United Kingdom">United Kingdom</option>
        <option value="Afghanistan">Afghanistan</option>
        <option value="Aland Islands">Aland Islands</option>
        <option value="Albania">Albania</option>
        <option value="Algeria">Algeria</option>
        <option value="American Samoa">American Samoa</option>
    </select>
    <input type="submit" name="assign" id="assign" value="assign" class="btn btn-default">
    <input type="hidden" name="my_data" value="">
</form>
<script>
$('document').ready(function(){
    $('#assign').click(function(){
    var ag = $('#selectpicker').val();
        $('[name="my_data"]').val(ag);
    });
});
</script>

@DelnaDavis

Try this snippet (one that is working for me)

<select name="adults[]" class="selectpicker" data-live-search-normalize="true" data-live-search="true" data-container="body" data-header="Ocupaciones" data-max-options="2" max-options-text="Solo dos opciones" title="Seleccionar ocupaciones" multiple>
	<option value="1">Single</option>
	<option value="2">Double</option>
	<option value="3">Triple</option>
</select>

change the name parameter accordingly, [] is important if you’re planning on working with multiple values.

adding the data-max-options="" parameter solved the problem for me.

Possible solution for the table element issue. Apparently nesting a form element inside a table is not proper nesting. I mean:

<table>
    <form>
        <thead>
            <th><select ...>...</select></th>
        </thead>
    </form>
</table>

This is not nested properly. so the browser takes all the input, select, radio, checkbox etc with the form and consider they are all right before the thead.

Then the problem starts. bootstrap-select takes our select element, constructs its new markup and returns them just where it found them which is where the select element was. However that is not in a form element as far as the browser is concerned.

Now you end up with a perfectly working select tool which has nothing to do with the form you submit. Thus no data is sent with the form.

Hi all - I managed to solve this by specifying the form in the select input (form=“form123”) HTH

Hi,

I had the same problem and after trying several tests I have fixed it with a solution that in my case works very well. This is my solution:

1. I added an empty option tag not visible

<option value="" class="hidden"></option>

this is the result

<select id="select1" name="select1" class="selectpicker" multiple data-live-search="true" >    <option value="" class="hidden"></option>    <option value="1">First</option>    <option value="2">Second</option>    <option value="3">Third</option> </select>

1. I added the following code so that when you deselect all items the code sets the empty item: in this manner when you send the form the item will be included

$("#select1").on('changed.bs.select', function (e) {    if($(this).val().length <= 0){       $(this).selectpicker('val', '');//sets hidden option       $(this).parent().find('button.dropdown-toggle .filter-option').css('color','#999');    }else{       $(this).find('option[value=""]').prop("selected", false);    } });

Best regards, m.

still the same issue with the newest 1.13.18 release

O problema e a hierarquia dos elementos, pra funcionar dentro de uma tabela tem que colocar o select dentro de uma <-tr-><-td->Coloque aqui o select que o “js” acha ele<-/td-><-/tr-> 😉

I ran into the same problem using Django and had a hard time debugging it. It appeared to be a typo in my template: I didn’t properly close a table tag and used <table> instead of </table>. This wasn’t so obvious, because the page layout still looked all right. Adding just 1 character solved my problem. Perhaps you should double check your HTML.

Curious if you’re still looking into this, please let me know. If you’d like me to submit some more details also more than willing, I couldn’t follow your guidelines as it’s impossible to create a JsFiddle that mimics the behavior in the Django framework.