Search code examples
javascriptjqueryserializationtabsbootstrap-selectpicker

How could we serialize selectpicker plugin text on different tab?

I have got the problem when i am trying to use two selectpicker but in different tab like the code below

$(document).ready(function(){

 $('.selectpicker').selectpicker({
         style: 'btn-default'
     });
})

$('#test').click(function(){
    var test = $('#okay').serialize();
    alert(test);
    console.log(test);
})
<link rel="stylesheet "type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/css/bootstrap-select.min.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/bootstrap-select.min.js"></script>
<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>

<ul class="nav nav-tabs">
  <li class="active"><a data-toggle="tab" href="#home">Home</a></li>
  <li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
  <li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
</ul>

<div class="tab-content">
  <div id="home" class="tab-pane fade in active">
    <form id="okay">
        <input class="form-control" type="text" name="1">
        
        <select class="selectpicker form-control" name="okse" id="okse">
	         <option value="2010">2010</option>
            <option value="2011">2011</option>
             <option value="2012">2012</option>
        </select>
        <input  class="form-control" type="text" name="4">
  </div>
  <div id="menu1" class="tab-pane fade">
      <input  class="form-control" type="text" name="6">
      <input  class="form-control" type="text" name="7">
      <input  class="form-control" type="text" name="8">
      <select class="selectpicker form-control" name="okse1" id="okse1">
	       <option value="Matt">matt</option>
         <option value="Dessy">Dess</option>
        </select>
    </form>
  </div>
  <div id="menu2" class="tab-pane fade">
    <h3>Menu 2</h3>
    <p>Some content in menu 2.</p>
  </div>
</div>

<hr>
<br>

<button id="test">Click me</button>

</body>
</html>

The result i got is

1=&okse=2010&4=&6=&7=&8=

the id okse1 didnt include in jquery serialized. WHat i expect was like below:

1=&okse=2010&4=&6=&7=&8=&okse1=matt

or i got an empty result but the id okse1 got serialized

1=&okse=2010&4=&6=&7=&8=&okse1=

As you could see above snippet, the selectpicker with id okse1 didnt serialized when i clicked button#test. if the selectpicker was in different tab, it didint serialized. How do i fix this ?

Solution

  • Fix your HTML markup as in suggestion. Form is closed before second tab's div. Opened in the first one. Here's fixed fiddle: https://jsfiddle.net/hkxewpbn/

    <form id="okay">
  <div id="home" class="tab-pane fade in active">

    <input class="form-control" type="text" name="1">

    <select class="selectpicker form-control" name="okse" id="okse">
         <option value="2010">2010</option>
        <option value="2011">2011</option>
         <option value="2012">2012</option>
    </select>
    <input  class="form-control" type="text" name="4">
</div>
<div id="menu1" class="tab-pane fade">
  <input  class="form-control" type="text" name="6">
  <input  class="form-control" type="text" name="7">
  <input  class="form-control" type="text" name="8">
  <select class="selectpicker form-control" name="okse1" id="okse1">
       <option value="Matt">matt</option>
     <option value="Dessy">Dess</option>
    </select>