Question

我需要使用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>

这里我需要在标签General处于活动状态时，然后在提交按钮之前添加<input name="updatesettings" value="1" type="hidden">，如果标签Tariff被激活，则<input name="tariffsettings" value="1" type="hidden">将在表单之前添加，而上一个使用Javascript or Jquery删除。

Answer 1

您需要在提交按钮之前添加更多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">');
}

Answer 2

由于您愿意使用jQuery，因此可以轻松完成。在项目上添加一个单独的类（在本例中为inputSelector），并在其上添加所需的输入名称作为数据（此处为data-name）。

<form action="" method="POST">
  <div class="panel panel-default">
    <ul class="nav nav-tabs nav-justified" role="tablist" id="cartabslist">
      <li class="inputSelector active" data-name='updatesettings'><a href="#GENERAL" data-toggle="tab">General</a></li>
      <li class=""><a href="#CARTYPES" data-toggle="tab">Types</a></li>
      <li class="inputSelector" data-name='tariffsettings'><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" id='someId' value="1" type="hidden">
      <button type="submit" class="btn btn-primary">Submit</button>
    </div>
  </div>
</form>

并将以下js添加到ready函数中：

$('.inputSelector').click(function(){
  $('#someId').prop('name',$(this).data('name'));
});

Answer 3

希望这会有所帮助。而且，我还删除了隐藏属性，并做了一些更改以用于演示。

let UICarTabsList = document.querySelector('#cartabslist');
  let UISettingsInput = document.querySelector('#settings-input');

  document.querySelector('#cartabslist #Generaltab').addEventListener('click', (e) => {
    UISettingsInput.innerHTML = `<input name="updatesettings" value="1" type="" placeholder="genral">`;
  });

  UICarTabsList.querySelector('#tarifftab').addEventListener('click', (e) => {
    UISettingsInput.innerHTML = `<input name="tariffsettings" value="2" type="" placeholder="tarrif">`;
  });

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="panel panel-default">
  <ul class="nav nav-tabs nav-justified" role="tablist" id="cartabslist">
    <li class="nav-link active" id="Generaltab"><a href="#GENERAL" data-toggle="tab"> General</a></li>
    <li class="nav-link"><a href="#CARTYPES" data-toggle="tab"> Types</a></li>
    <li class="nav-link" id="tarifftab"><a href="#CARTARIFF" data-toggle="tab"> Tariff</a></li>
    <li class="nav-link"><a href="#PAYMENT" data-toggle="tab"> Payment Methods</a></li>
  </ul>
</div>
<br />
<div class="panel-footer">
  <form action="" id="main-form" method="POST">
    <div id="settings-input"><input name="updatesettings" value="1" type="" placeholder="genral"></div>
    <button type="submit" class="btn btn-primary">Submit</button>

  </form>
</div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

如何使用Javascript / Jquery按激活的选项卡在表单内部添加输入字段

3 个答案: