如何通过 JavaScript 在 request.POST 中发送当前表单选项卡答案

【问题标题】：How to send the current form tab in a request.POST via JavaScript如何通过 JavaScript 在 request.POST 中发送当前表单选项卡
【发布时间】：2021-05-07 05:32:00
【问题描述】：

我有一个表单，在表单中我有一系列对象，每个对象都有一个选项卡。例如：

object 1: tab1 object 2: tab2 object 3: tab3

代码示例：

<ul class="nav nav-pills" id="evidence-formset-tab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="evidence-form-1-tab" data-toggle="pill" href="#evidence-form-1" role="tab" aria-controls="evidence-form-1" aria-selected="true">1</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="evidence-form-2-tab" data-toggle="pill" href="#evidence-form-2" role="tab" aria-controls="evidence-form-2" aria-selected="false">2</a>
  </li>
</ul>

我想知道提交表单时所选标签的值。

JavaScript 部分：

function validateRegister() {
    event.preventDefault();
    $('#evidence-formset').attr('action', "{% url 'interpretation' %}").submit();
}

有没有办法注入当前tab的值，然后在后端的(request.POST)中处理？

【问题讨论】：

需要根据选中的标签获取1或2？
没错，这就是我想要得到的。

标签： javascript jquery django

【解决方案1】：

您可以使用$(".nav-item.active a").text() 获取活动选项卡的值，然后将此值放入输入标签中并将其附加到您的表单中，这样它也将被提交。

演示代码：

function validateRegister() {
  event.preventDefault();
  console.log($(".nav-item.active a").text())
  //get class which is active text() and append inside form..
  $('#evidence-formset').append("<input type='text' name='obj' value='" + $(".nav-item.active a").text() + "'>")
  $('#evidence-formset').attr('action', "{% url 'interpretation' %}").submit();
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<ul class="nav nav-pills" id="evidence-formset-tab" role="tablist">
  <li class="nav-item active">
    <a class="nav-link active" id="evidence-form-1-tab" data-toggle="pill" href="#evidence-form-1" role="tab" aria-controls="evidence-form-1" aria-selected="true">1</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="evidence-form-2-tab" data-toggle="pill" href="#evidence-form-2" role="tab" aria-controls="evidence-form-2" aria-selected="false">2</a>
  </li>
</ul>
<div class="tab-content">
  <div id="evidence-form-1" class="tab-pane fade in active">
    <h3>HOME</h3>
  </div>
  <div id="evidence-form-2" class="tab-pane fade">
    <h3>Menu 1</h3>
  </div>

</div>

<form id="evidence-formset">
  <button type="submit" onclick="validateRegister()">Click me</button>
</form>

【讨论】：

感谢您的回答，看起来不错，但出于某种原因，console.log($(".nav-item.active a").text()) 没有任何价值。它总是空的。这没有任何意义。
您使用的是哪个版本的 boostrap ？
目前我正在使用 Bootstrap 4
那个版本将活动类添加到a标签所以使用$(".nav-link.active").text()
我不知道怎么做，但是当你说价值没有显示时，我首先想到的是:)。

【解决方案2】：

我假设您使用的是Bootstrap navs。如果这是正确的，您应该首先提及它（并标记您的问题）。

您可以在<form></form> 中的某处添加<input type="hidden" name="activetab" id="activetab"> 标签。然后添加一个事件侦听器，每当用户更改选项卡时更新此隐藏输入的值：

$('a[data-toggle="pill"]').on('shown.bs.tab', (e) => {
  $('#activetab').val(e.target.href.replace(/^#/, ''));
})

例如，如果用户单击选项卡 1，这会将输入的值设置为 "evidence-form-1"。然后，当用户提交表单时，浏览器会将隐藏输入的值作为activetab=evidence-form-1发送给服务器，可以从Django中读取。

请注意，在用户至少切换一次选项卡之前，输入不会有值。如果用户在提交表单之前没有单击任何选项卡，这可能会成为一个问题。我会留给你弄清楚如何处理这种情况。

【讨论】：