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

Question

I have a form, in the form I have a series of objects, for each object there is a tab. For example:

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

Code example:

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

I would like to know the value of the selected tab at the time of submitting the form.

JavaScript part:

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

Is there a way to inject the value of the current tab and then process it in the (request.POST) in the backend?

Answer 1

You can use $(".nav-item.active a").text() to get value of active tab and then put this value inside input tag and append it to your form so that this will also get submitted.

Demo Code :

 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>

Answer 2

I assume you are using Bootstrap navs . If this is correct, you should mention it first (and tag your qeustion as such).

You can add a <input type="hidden" name="activetab" id="activetab"> tag somewhere inside your <form></form> . Then add an event listener that updates the value of this hidden input whenever the user changes the tab:

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

For example, if the user clicks on Tab 1, this will set the value of the input to "evidence-form-1" . Then, when the user submits the form, the browser will send the value of the hidden input to the server as activetab=evidence-form-1 , which can be read from Django.

Note that the input won't have a value until the user switches tabs at least once. This may become a problem if the user does not click on any tabs before submitting the form. I'll leave it to you to figure out how to handle this scenario.