时间戳

首页 > 解决方案 > 如何使用 Javascript/Jquery 根据活动选项卡在表单内添加输入字段

javascript - 如何使用 Javascript/Jquery 根据活动选项卡在表单内添加输入字段

问题描述

我需要根据活动的选项卡动态添加输入字段javascript/jquery。我在下面给出我的代码。

<form action="" method="POST">
  <div class="panel panel-default">
    <ul class="nav nav-tabs nav-justified" role="tablist" id="cartabslist">
      <li class="active" id="Generaltab"><a href="#GENERAL" data-toggle="tab">General</a></li>
      <li class=""><a href="#CARTYPES" data-toggle="tab">Types</a></li>
      <li class=""><a href="#CARTARIFF" data-toggle="tab">Tariff</a></li>
      <li class=""><a href="#PAYMENT" data-toggle="tab">Payment Methods</a></li>
    </ul>
<div class="panel-footer">
      <input name="updatesettings" value="1" type="hidden">
      <input name="tariffsettings" value="1" type="hidden">
      <button type="submit" class="btn btn-primary">Submit</button>
    </div>
  </div>
</form>

Here I need when tab Generalis active then <input name="updatesettings" value="1" type="hidden">will add before submit button and if tab Tariffis active <input name="tariffsettings" value="1" type="hidden">will add before form and the previous one will remove using Javascript or Jquery.

标签： javascriptjquery

解决方案

您需要在提交按钮之前添加更多 div

<form action="" method="POST">
  <div class="panel panel-default">
    <ul class="nav nav-tabs nav-justified" role="tablist" id="cartabslist">
      <li class="active" id="Generaltab"><a href="#GENERAL" data-toggle="tab">General</a></li>
      <li class=""><a href="#CARTYPES" data-toggle="tab">Types</a></li>
      <li class=""><a href="#CARTARIFF" data-toggle="tab">Tariff</a></li>
      <li class=""><a href="#PAYMENT" data-toggle="tab">Payment Methods</a></li>
    </ul>
<div class="panel-footer">
     <div id="hiddenDiv"></div>
      <button type="submit" class="btn btn-primary">Submit</button>
    </div>
  </div>
</form>

然后您可以检查常规选项卡是否处于活动状态，然后您可以附加到“hiddenDiv”，否则您可以空白该 div，反之亦然关税选项卡

var selected = $("#cartabslist").tabs( "option", "selected" );
var selectedTabTitle = $($("#cartabslist li a")[selected]).text();
$("#hiddenDiv").html('');
if(selectedTabTitle == 'General')
{
   $("#hiddenDiv").append('<input name="updatesettings" value="1" type="hidden">');
}
else if(selectedTabTitle == 'Tariff')
{
   $("#hiddenDiv").append('<input name="tariffsettings" value="1" type="hidden">');
}

推荐阅读