How to pass selected bootstrap tabular data?

Javascript & Ajax
#1

I have a radio button containing 2 tabs as shown below. Now when I am trying to insert data based on the selected tab it is taking both the tabs data instead of selected tab. Can anyone help me where I am going wrong?

Radio button

<div align="left">
       City Local: <input type="radio" onclick="javascript:taxi_booking();" name="yesno" id="outstation" value="city"> <br>    
</div>

Based on radio button selection below is the code containing 2 tabs:

    <ul class="nav nav-tabs" id="myTab">
      <li class="active"><a href="#roundtrip_tbl">Round Trip</a></li>
      <li><a href="#oneway_tbl">One Way</a></li>
    </ul>
<div class="tab-content">
<div class="tab-pane active" id="roundtrip_tbl">
......
</div>

<div class="tab-pane" id="oneway_tbl">
.....
</div>
</div>

Suppose I have selected roundtrip_tbl tab and entered data wrt it then when I dump the data using var_dump(), it is taking both tab’s data i.e., roundtrip_tbl as well as oneway_tbl.

#2

They are both visible on the DOM. Are you using a form, or selecting just the data you want?

#3

I am using a form and within a form all the data is existing.

#4

If there are two tabs and their data is respective to each tab, do a form for each.

#5

I did try it but still I am unable to pass single table’s data. Its still considering both the tabs data.

#6

Then you still have it all on one form, because using two forms, one would not know about the others inputs. What is the current code for the modal you have the two forms on?

#7

Yes, it’s all in one form. If i am not wrong then you are asking about the code, if so then it is done using basic JS function as follows:

<td width="140">
     <div align="left">                                                               
       Outstation: <input type="radio" onclick="javascript:taxi_booking();" name="yesno" id="city" checked="checked" value="outstation">
         </div>
        </td>
    <td width="140">
         <div align="left">
   City Local: <input type="radio" onclick="javascript:taxi_booking();" name="yesno" id="outstation" value="city"> 
       <br>    
  </div>
  </td>

JS:

function taxi_booking() {
    if (document.getElementById('outstation').checked) {
        document.getElementById('ifOutstation').style.visibility = 'visible';        
    }
    else {
        document.getElementById('ifOutstation').style.visibility = 'hidden';
    }  
    if(document.getElementById('city').checked) {
        document.getElementById('city_pickup').style.visibility = 'visible';
    }
    else {
        document.getElementById('city_pickup').style.visibility = 'hidden';
    }
}


<script type="text/javascript">
    $( function() {
          $( "#ifOutstation" ).tabs();
    });
</script>

In the above JS: ifOutstation is nothing but the tabs that will be hidden untill user selects outstation radio button as seen in the previous code.

#8

I guess I am not being clear enough.

<div class="tab-pane active" id="roundtrip_tbl">
......
</div>

<div class="tab-pane" id="oneway_tbl">
.....
</div>

Is the html that the dots replaced the same elements? Or are they different? What is in that?

<div class="tab-pane active" id="roundtrip_tbl">
    <form id='round-trip'>
    
    </form>
</div>

<div class="tab-pane" id="oneway_tbl">
    <form id='one-way'>
    
    </form>
</div>

That is two separate forms and will only include the inputs contained in their respective areas.

#9

within those there is a list of other table row (tr) and table data (td) which is too big so did not paste the entire code.

#10

But you said everything was on the same form rather than two separate forms?

#11

it will be helpful if you post the screen shot and then screen shot of the code what you doing then it will be easy to debug and suggest you better solution and fast.

thank you

#12 
<tr>
   <td width="140">
      <div id="ifOutstation" style="visibility:hidden">
         <ul class="nav nav-tabs" id="myTab">
            <li class="active">
               <a href="#roundtrip_tbl" data-toggle="tab" id="first_tab">Round Trip</a>
            </li>
            <li>
               <a href="#oneway_tbl" data-toggle="tab" id="second_tab">One Way</a>
            </li>
         </ul>
         <div id="roundtrip_tbl">
            <table style="max-width:880px" border="1" bordercolor="#c1dde4" cellspacing="0" cellpadding="5" id="roundtrip_tbl_travel" >
               <tr class="accombg">
                  <td colspan="4" align="center"><strong>Round City Local Travel</strong></td>
                  <td colspan="4" align="center"><strong>Date and Time </strong></td>
               </tr>
               <tr class="accombg">
                  <td align="center">Origin <span class="redtext">* </span >
                  </td>
                  <td align="center">
                     Pick Up Point <span class="redtext">*</span>
                     <p><span class="accombgsmalltext"> </span></p>
                  </td>
                  <td align="center">
                     Destination <span class="redtext">*</span>
                     <p><span class="accombgsmalltext"></span></p>
                  </td>
                  <td align="center">
                     Drop Point <span class="redtext">*</span>
                     <p><span class="accombgsmalltext"> </span></p>
                  </td>
                  <td style="min-width:50px;max-width:50px" align="center">Departure<span class="redtext">*</span></td>
                  <td width="60" align="center">Time</td>
                  <td style="min-width:50px;max-width:50px;" align="center">Arrival <span class="redtext">*</span></td>
                  <td width="60" align="center">Time</td>
               </tr>
               <tr class="sectionbg" id="jsTravelRoundDet">
                  <td>
                     <div>   
                        <input type="text" size="10" name="round_travel_det[dep_rplace][]" id="dep_place" readonly="readonly" value="<?php echo $emp_det['location']; ?>" class="jsTravelCls jsCityCls"/>
                     </div>
                  </td>
                  <td>
                     <input type="text"  name="round_travel_det[dep_rcity][]" id="dep_city" style="width:80px;"  class="jsTravelCls" />
                  </td>
                  <td>
                     <div>
                        <select name="round_travel_det[arr_rplace][]" style="width:110px;" onchange="showForm19(this.value, this, 'arr_place');" id="arr_place" class="jsTravelCls jsCityCls">
                           <?php 
                              $label = ''; $group = 0;
                              foreach ($city_list as $key => $value) { ?>
                           <?php if($label == '' || $value['group_name'] != $label) { ?>
                           <?php if($group) { ?>
                           </optgroup>
                           <?php } ?>
                           <optgroup label="<?php echo ($value['group_name'] == 'INDIA') ? 'DOMESTIC': $value['group_name']; ?>" class="grey">
                              <?php
                                 $group ++;
                                 $label = $value['group_name'];
                                 }
                                 ?>
                              <option <?php echo (in_array($value['name'], $city_sens)) ? "style='color:red'" : ''; ?> value="<?php echo $key ?>" ><?php echo $value['name'] ?> 
                              </option>
                              <?php } ?> 
                           <optgroup label="Others">
                              <option value="Others">Others</option>
                           </optgroup>
                        </select>
                     </div>
                  </td>
                  <td>
                     <input type="text" name="round_travel_det[arr_rcity][]" id="arr_city" style="width:80px;"  class="jsTravelCls"/>
                  </td>
                  <td>
                     <input style="min-width:80px;max-width:80px" type="text" name="round_travel_det[dep_date][]" value="" id="assigned_date" class="assigned_date" />
                  </td>
                  <td>
                     <div>
                        <select name="round_travel_det[time_zone3][]" style="max-width:50px"  class="jsTravelCls">
                        <?php
                           foreach ($time_zone as $tme_zone) {
                               echo "<option value=\"" . $tme_zone . "\">" . $tme_zone . "</option>";
                           }
                           ?>
                        </select>
                     </div>
                  </td>
                  <td>
                     <input style="min-width:80px;max-width:80px" type="text" name="round_travel_det[arr_date][]" value="" id="last_date" class="assigned_date" />
                  </td>
                  <td>
                     <div id="tz2">
                        <select name="round_travel_det[time_zone4][]" style="width:50px" class="jsTravelCls">
                        <?php
                           foreach ($time_zone as $tme_zone) {
                             		echo "<option value=\"" . $tme_zone . "\">" . $tme_zone . "</option>";
                           }
                           ?> 
                        </select> 
                     </div>
                  </td>
               </tr>
            </table>
            <table>
               <tr>
                  <td>
                     <p id="addnew">
                        <a href="javascript:void(0)" class="addlinks" onclick="addTravelRow_1()"> + Insert Row </a> 
                     </p>
                  </td>
                  <td>
                     <p id="delrow_t" >
                        <a href="javascript:void(0)" class="addlinks" onclick="delIt('roundtrip_tbl_travel')"> - Delete Row </a>
                     </p>
                  </td>
               </tr>
            </table>
         </div>
         <div id="oneway_tbl">
            <table style="max-width:880px" border="1" bordercolor="#c1dde4" cellspacing="0" cellpadding="5" id="oneway_tbl_travel">
               <tr class="accombg">
                  <td colspan="4" align="center"><strong>One Way Travel</strong></td>
                  <td colspan="4" align="center"><strong>Date and Time </strong></td>
               </tr>
               <tr class="accombg">
                  <td align="center">
                     Origin <span class="redtext">* </span >
                     <p><span class="accombgsmalltext">(Enter country if foreign, City if India)</span></p>
                  </td>
                  <td align="center">
                     City Pick Up<span class="redtext">*</span>
                     <p><span class="accombgsmalltext"> (Pick up Point)</span></p>
                  </td>
                  <td align="center">
                     Destination <span class="redtext">*</span></span>
                     <p><span class="accombgsmalltext">(Enter country if foreign, City if India)</span></p>
                  </td>
                  <td align="center">
                     City Drop Off <span class="redtext">*</span>
                     <p><span class="accombgsmalltext"> (Drop Point)</span></p>
                  </td>
                  <td style="min-width:50px;max-width:50px" align="center">Departure<span class="redtext">*</span></td>
                  <td width="60" align="center">Time</td>
                  <td style="min-width:50px;max-width:50px;" align="center">Arrival <span class="redtext">*</span></td>
                  <td width="60" align="center">Time</td>
               </tr>
               <tr class="sectionbg" id="jsTravelOneWayDet">
                  <td>
                     <div>                                                                            
                        <input type="text" size="10" name="oneway_travel_det[dep_oplace][]" id="dep_place" readonly="readonly" value="<?php echo $emp_det['location']; ?>" class="jsTravelCls jsCityCls"/>
                     </div>
                  </td>
                  <td>
                     <input type="text" name="oneway_travel_det[dep_ocity][]" id="dep_city" style="width:80px;"  class="jsTravelCls" />
                  </td>
                  <td>
                     <div>
                        <input type="text" size="10" name="oneway_travel_det[arr_oplace][]" id="dep_place" readonly="readonly" value="<?php echo $emp_det['location']; ?>" class="jsTravelCls jsCityCls"/>                                                               
                     </div>
                  </td>
                  <td>
                     <input type="text"  name="oneway_travel_det[arr_ocity][]" id="arr_city" style="width:80px;"  class="jsTravelCls"/>
                  </td>
                  <td>
                     <input style="min-width:80px;max-width:80px" type="text" name="oneway_travel_det[dep_date][]" value="" id="assigned_date" class="assigned_date" />
                  </td>
                  <td>
                     <div>
                        <select name="oneway_travel_det[time_zone3][]" style="max-width:50px"  class="jsTravelCls"> 
                        <?php
                           foreach ($time_zone as $tme_zone) {
                               echo "<option value=\"" . $tme_zone . "\">" . $tme_zone . "</option>";
                           }
                           ?>
                        </select>
                     </div>
                  </td>
                  <td>
                     <input style="min-width:80px;max-width:80px" type="text" name="oneway_travel_det[arr_date][]" value="" id="last_date" class="assigned_date" />
                  </td>
                  <td>
                     <div id="tz2">
                        <select name="oneway_travel_det[time_zone4][]" style="width:50px" class="jsTravelCls">
                        <?php
                           foreach ($time_zone as $tme_zone) {
                               echo "<option value=\"" . $tme_zone . "\">" . $tme_zone . "</option>";
                           }
                           ?>
                        </select>
                     </div>
                  </td>
               </tr>
            </table>
         </div>
      </div>
   </td>
   <script type="text/javascript">
      $( function() {
          $( "#ifOutstation" ).tabs();                                                        
      });                                                   
   </script>
</tr>
#13 
<tr>
   <td width="110">Type of Trip</td>
   <td width="140">
      <div align="left">                                                               
         Outstation: <input type="radio" onclick="taxi_booking();" name="yesno" id="city" checked="checked" value="outstation">
      </div>
   </td>
   <td width="140">
      <div align="left">
         City Local: <input type="radio" onclick="taxi_booking();" name="yesno" id="outstation" value="city"> 
         <br>    
      </div>
   </td>
</tr>

This is the code where on click of City Local the above code will be visible i.e., round trip and one way trip.

#14

You would use the submitted ‘yesno’ radio-button value to control what form fields you operate on in the server-side form processing code.

#15

Can you please elaborate? I am bit confused. @phdr

#16 
<script type="text/javascript">
    $( function() {
          $( "#ifOutstation" ).tabs();
    });
</script>

I think that I need to write insert query based on tab selection within the above js tabs() function. If anyone could help me in guiding as to how to do it would be great.

#17

So, after reviewing everything a couple of times, what you need to do is get and add the selected tab ‘id’ to the submitted form data so that the form processing code will know which form fields to operate on.

Reference this link as a starting point (found via a web search for what you are doing): http://jsfiddle.net/tbEq6/

Add a hidden form field somewhere within the form -

<input type='hidden' id='tab_value' name='tab_value'>

Add the following javascript -

<script>
function getSelectedTabId(){
    return $("#ifOutstation .ui-tabs-panel:visible").attr("id");
}

$(function() {
    // add click event to set a form field value with the selected tab id 
    $("#ifOutstation").click(function(e){
         $("#tab_value").val(getSelectedTabId());
    });

    // set the initial value
    $("#ifOutstation").click();
  });
</script>
1 Like
#18

I need to enter the data/info passed within the tabs into database. @phdr

So far I did this using which I am able to get the id

 $( function() {
  $( "#ifOutstation" ).tabs({                                                   	
   activate: function (event, ui) {
   var $tabs = $('#ifOutstation').tabs();
   var selected = $tabs.tabs('option', 'active'); // => 0
   console.log(selected);        														
}
 }); 
});

Now using the selected id, I need to insert the values of the selected tab into database.

#19

@phdr Thank you so much. Your solution worked for me. I am able to insert the records into database. Thank you all for your help.

Sponsor our Newsletter | Privacy Policy | Terms of Service