如何提交非活动标签的值

Question

I am submitting dynamic form fields using JQuery Tabs but problem is that it keep submit only last tab values because it check which tab is active and which is not so as it see the last one is active so it posts the value of that tab only not other like 1, 2, 3 etc.

Here is the JQuery code I am using:

$('#rootwizard').bootstrapWizard({onTabShow: function (tab, navigation, index) {
            var $total = navigation.find('li').length;
            var $current = index + 1;
            var $percent = ($current / $total) * 100;
            $('#rootwizard').find('.bar').css({width: $percent + '%'});
            // If it's the last tab then hide the last button and show the finish instead
            if ($current >= $total) {
                $('#rootwizard').find('.pager .next').hide();
                $('#rootwizard').find('.pager .finish').show();
                $('#rootwizard').find('.pager .finish').removeClass('disabled');
            } else {
                $('#rootwizard').find('.pager .next').show();
                $('#rootwizard').find('.pager .finish').hide();
            }
        }});
    $('#rootwizard .finish').click(function () {
        alert('Finished!, Starting over!');
        //$('#rootwizard').find("a[href*='tab1']").trigger('click');
        $("#mealForm").submit();
    });

mealForm is the form id that contains data of all the tabs but only posts last tabs/active tab value not all tabs.

Here is the HTML code with PHP that generates dynamic tabs and dynamic forms but it only submits active tab data not the all ones.

HTML:

 <div id="rootwizard">
                <div class="navbar">
                    <div class="navbar-inner">
                        <div class="container">
                            <ul>
                                <?php
                                for ($counter = 1; $counter <= $_POST['meal_numbers']; $counter++) {
                                    ?>
                                    <li><a href="#tab<?php echo $counter; ?>" data-toggle="tab">Meal <?php echo $counter; ?></a></li>
                                <?php } ?>
                            </ul>
                        </div>
                    </div>
                </div>
                <div id="bar" class="progress progress-striped active">
                    <div class="bar"></div>
                </div>
                <div class="tab-content">
                    <?php
                    for ($counter = 1; $counter <= $_POST['meal_numbers']; $counter++) {
                        ?>
                        <div class="tab-pane" id="tab<?php echo $counter; ?>">
                            <form action="process/adminProcess.php?page=addClientMealData" method="post" id="mealForm" class="form-horizontal">
                                <fieldset>
                                    <?php
                                    $mealData = 1;
                                    $QuerySet = $objadminViewFunctions->viewAllFoodCategoryData();
                                    while ($RecordSet = $QuerySet->fetch_object()) {
                                        ?>
                                        <div class="control-group">
                                            <label class="control-label" for="focusedInput"><?php echo $RecordSet->food_name . ' ' . $RecordSet->food_gram . ' (grams)'; ?></label>
                                            <div class="controls">
                                                <?php //print $objadminViewFunctions->viewFoodSourcesDropdownForAddPg($RecordSet->id); ?>
                                                <input class="input-xlarge focused" id="focusedInput" name="mealData[<?php echo $counter; ?>][<?php echo $mealData; ?>][macro_ratio]" type="text">
                                                <input type="hidden" name="mealData[<?php echo $counter; ?>][<?php echo $mealData; ?>][foodCategoryId]" value="<?php echo $RecordSet->id; ?>">
                                            </div>
                                        </div>
                                        <?php
                                        $mealData++;
                                    }
                                    ?>
                                </fieldset>
                                <ul class="pager wizard">
                                    <li class="previous first" style="display:none;"><a href="javascript:void(0);">First</a></li>
                                    <li class="previous"><a href="javascript:void(0);">Previous</a></li>
                                    <li class="next last" style="display:none;"><a href="javascript:void(0);">Last</a></li>
                                    <li class="next"><a href="javascript:void(0);">Next</a></li>
                                    <!--<li class="next finish" style="display:none;"><a href="javascript:;">Finish</a></li>-->
                                    <button type="submit" class="btn btn-primary next finish" style="display:none;">Submit</button>
                                </ul>
                            </form>
                        </div>
                    <?php } ?>

                </div>  
            </div>

Here is the output of above HTML form data:

<div id="rootwizard">
  <div class="navbar">
    <div class="navbar-inner">
      <div class="container">
        <ul>
          <li><a href="#tab1" data-toggle="tab">Meal 1</a></li>
          <li><a href="#tab2" data-toggle="tab">Meal 2</a></li>
        </ul>
      </div>
    </div>
  </div>
  <div id="bar" class="progress progress-striped active">
    <div class="bar"></div>
  </div>
  <div class="tab-content">
    <div class="tab-pane" id="tab1">
      <form action="process/adminProcess.php?page=addClientMealData" method="post" id="mealForm" class="form-horizontal">
        <fieldset>
          <div class="control-group">
            <label class="control-label" for="focusedInput">Protein 60 (grams)</label>
            <div class="controls">
              <input class="input-xlarge focused" id="focusedInput" name="mealData[1][1][macro_ratio]" type="text">
              <input type="hidden" name="mealData[1][1][foodCategoryId]" value="37">
            </div>
          </div>
          <div class="control-group">
            <label class="control-label" for="focusedInput">Protein 55 (grams)</label>
            <div class="controls">
              <input class="input-xlarge focused" id="focusedInput" name="mealData[1][2][macro_ratio]" type="text">
              <input type="hidden" name="mealData[1][2][foodCategoryId]" value="2">
            </div>
          </div>
          <div class="control-group">
            <label class="control-label" for="focusedInput">Protein 50 (grams)</label>
            <div class="controls">
              <input class="input-xlarge focused" id="focusedInput" name="mealData[1][3][macro_ratio]" type="text">
              <input type="hidden" name="mealData[1][3][foodCategoryId]" value="3">
            </div>
          </div>
          <div class="control-group">
            <label class="control-label" for="focusedInput">Protein 45 (grams)</label>
            <div class="controls">
              <input class="input-xlarge focused" id="focusedInput" name="mealData[1][4][macro_ratio]" type="text">
              <input type="hidden" name="mealData[1][4][foodCategoryId]" value="4">
            </div>
          </div>
          <div class="control-group">
            <label class="control-label" for="focusedInput">Protein 40 (grams)</label>
            <div class="controls">
              <input class="input-xlarge focused" id="focusedInput" name="mealData[1][5][macro_ratio]" type="text">
              <input type="hidden" name="mealData[1][5][foodCategoryId]" value="5">
            </div>
          </div>
          <div class="control-group">
            <label class="control-label" for="focusedInput">Protein 35 (grams)</label>
            <div class="controls">
              <input class="input-xlarge focused" id="focusedInput" name="mealData[1][6][macro_ratio]" type="text">
              <input type="hidden" name="mealData[1][6][foodCategoryId]" value="6">
            </div>
          </div>
          <div class="control-group">
            <label class="control-label" for="focusedInput">Protein 30 (grams)</label>
            <div class="controls">
              <input class="input-xlarge focused" id="focusedInput" name="mealData[1][7][macro_ratio]" type="text">
              <input type="hidden" name="mealData[1][7][foodCategoryId]" value="7">
            </div>
          </div>
          <div class="control-group">
            <label class="control-label" for="focusedInput">Protein 25 (grams)</label>
            <div class="controls">
              <input class="input-xlarge focused" id="focusedInput" name="mealData[1][8][macro_ratio]" type="text">
              <input type="hidden" name="mealData[1][8][foodCategoryId]" value="8">
            </div>
          </div>
          <div class="control-group">
            <label class="control-label" for="focusedInput">Protein 20 (grams)</label>
            <div class="controls">
              <input class="input-xlarge focused" id="focusedInput" name="mealData[1][9][macro_ratio]" type="text">
              <input type="hidden" name="mealData[1][9][foodCategoryId]" value="9">
            </div>
          </div>
        </fieldset>
        <ul class="pager wizard">
          <li class="previous first" style="display:none;"><a href="javascript:void(0);">First</a></li>
          <li class="previous"><a href="javascript:void(0);">Previous</a></li>
          <li class="next last" style="display:none;"><a href="javascript:void(0);">Last</a></li>
          <li class="next"><a href="javascript:void(0);">Next</a></li>
          <!--<li class="next finish" style="display:none;"><a href="javascript:;">Finish</a></li>-->
          <button type="submit" class="btn btn-primary next finish" style="display:none;">Submit</button>
        </ul>
      </form>
    </div>
    <div class="tab-pane" id="tab2">
      <form action="process/adminProcess.php?page=addClientMealData" method="post" id="mealForm" class="form-horizontal">
        <fieldset>
          <div class="control-group">
            <label class="control-label" for="focusedInput">Protein 60 (grams)</label>
            <div class="controls">
              <input class="input-xlarge focused" id="focusedInput" name="mealData[2][1][macro_ratio]" type="text">
              <input type="hidden" name="mealData[2][1][foodCategoryId]" value="37">
            </div>
          </div>
          <div class="control-group">
            <label class="control-label" for="focusedInput">Protein 55 (grams)</label>
            <div class="controls">
              <input class="input-xlarge focused" id="focusedInput" name="mealData[2][2][macro_ratio]" type="text">
              <input type="hidden" name="mealData[2][2][foodCategoryId]" value="2">
            </div>
          </div>
          <div class="control-group">
            <label class="control-label" for="focusedInput">Protein 50 (grams)</label>
            <div class="controls">
              <input class="input-xlarge focused" id="focusedInput" name="mealData[2][3][macro_ratio]" type="text">
              <input type="hidden" name="mealData[2][3][foodCategoryId]" value="3">
            </div>
          </div>
          <div class="control-group">
            <label class="control-label" for="focusedInput">Protein 45 (grams)</label>
            <div class="controls">
              <input class="input-xlarge focused" id="focusedInput" name="mealData[2][4][macro_ratio]" type="text">
              <input type="hidden" name="mealData[2][4][foodCategoryId]" value="4">
            </div>
          </div>
          <div class="control-group">
            <label class="control-label" for="focusedInput">Protein 40 (grams)</label>
            <div class="controls">
              <input class="input-xlarge focused" id="focusedInput" name="mealData[2][5][macro_ratio]" type="text">
              <input type="hidden" name="mealData[2][5][foodCategoryId]" value="5">
            </div>
          </div>
          <div class="control-group">
            <label class="control-label" for="focusedInput">Protein 35 (grams)</label>
            <div class="controls">
              <input class="input-xlarge focused" id="focusedInput" name="mealData[2][6][macro_ratio]" type="text">
              <input type="hidden" name="mealData[2][6][foodCategoryId]" value="6">
            </div>
          </div>
          <div class="control-group">
            <label class="control-label" for="focusedInput">Protein 30 (grams)</label>
            <div class="controls">
              <input class="input-xlarge focused" id="focusedInput" name="mealData[2][7][macro_ratio]" type="text">
              <input type="hidden" name="mealData[2][7][foodCategoryId]" value="7">
            </div>
          </div>
          <div class="control-group">
            <label class="control-label" for="focusedInput">Protein 25 (grams)</label>
            <div class="controls">
              <input class="input-xlarge focused" id="focusedInput" name="mealData[2][8][macro_ratio]" type="text">
              <input type="hidden" name="mealData[2][8][foodCategoryId]" value="8">
            </div>
          </div>
          <div class="control-group">
            <label class="control-label" for="focusedInput">Protein 20 (grams)</label>
            <div class="controls">
              <input class="input-xlarge focused" id="focusedInput" name="mealData[2][9][macro_ratio]" type="text">
              <input type="hidden" name="mealData[2][9][foodCategoryId]" value="9">
            </div>
          </div>
        </fieldset>
        <ul class="pager wizard">
          <li class="previous first" style="display:none;"><a href="javascript:void(0);">First</a></li>
          <li class="previous"><a href="javascript:void(0);">Previous</a></li>
          <li class="next last" style="display:none;"><a href="javascript:void(0);">Last</a></li>
          <li class="next"><a href="javascript:void(0);">Next</a></li>
          <!--<li class="next finish" style="display:none;"><a href="javascript:;">Finish</a></li>-->
          <button type="submit" class="btn btn-primary next finish" style="display:none;">Submit</button>
        </ul>
      </form>
    </div>
  </div>
</div>

Screenshots as per above HTML:

Tab 1

Tab 2

Answer 1

You are using each tab as separate form. That is why you can submit only one tab. Use only one form which is opened before and closed after bootstrap tabs

<form action="process/adminProcess.php?page=addClientMealData" method="post" id="mealForm" class="form-horizontal">
    <div class="tab-content">
      .....
    </div>
</form>