如何提交非活动标签的值 Jquery

Question

我正在使用 JQuery 选项卡提交动态表单域，但问题是它只提交最后一个选项卡值，因为它检查哪个选项卡处于活动状态，哪个不是，因为它看到最后一个选项卡处于活动状态，所以它仅发布该选项卡的值，而不发布其他选项卡，例如 1、2、3 等

这是我正在使用的 JQuery 代码：

$('#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 是包含所有选项卡数据但仅发布最后一个 tabs/active 选项卡值而非所有选项卡的表单 ID。

这是带有 PHP 的 HTML 代码，它生成动态选项卡和动态表单，但它只提交活动选项卡数据而不是所有数据。

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>

以上 HTML 表单数据的输出：

<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>

截图如上HTML:

选项卡 1

选项卡 2

Answer 1

您将每个选项卡用作单独的表单。这就是为什么您只能提交一个选项卡。仅使用一个在 bootstrap 个选项卡

之前打开并在之后关闭的表格

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

如何提交非活动标签的值 Jquery

How to submit value of inactive tabs Jquery

javascript

jquery

jquery-ui

twitter-bootstrap

bootstrap-tabs