how to save user’s choice in a Nav-tab modal

Question

I have a modal with some tabs referring to account closure, I need to save the user’s choices, I load types of payments, type of flags etc, each button can have an id, that id I want to save, I just don’t know where to put. In the last tab I will give a Ubmit and I need to know all the choices of the user, for example: DEBITO > NETWORK> VISA. I just don’t know how to store it for Django. Has anyone worked on any similar logic ?

<div id="card_pos_modal" class="modal fade">
    <div class="modal-dialog modal-lg" style="width:80%">
        <div class="modal-content">
            <div class="modal-body">
                <div class="well">
                    <ul class="nav nav-tabs" id="myTab">
                        <li class="nav-item"><a  href="#tab1" data-toggle="tab">TIPO DE CARTÃO</a></li>
                        <li class="nav-item"><a  href="#tab2" data-toggle="tab">ADQUIRENTE</a></li>
                        <li class="nav-item"><a  href="#tab3" data-toggle="tab">BANDEIRA</a></li>
                        <li class="nav-item"><a  href="#tab4" data-toggle="tab">VALOR</a></li>
                    </ul>
                    <div id="myTabContent" class="tab-content ">

                        <div class="tab-pane" id="tab1">
                            <form class="form-horizontal" action='' method="POST">
                                {% for method in methodpay %}
                                <div class="btn-group">
                                    <button type="button" class="btn btn-info btn-lg method" >{{ method.methodpay_short_name method.id }}</button>
                                </div>
                                {% endfor %}
                            </form>
                        </div>

                        <div class="tab-pane" id="tab2">
                            <form class="form-horizontal" action='' method="POST">
                                {% for acquire in acquirer %}
                                <div class="btn-group">
                                    <button type="button" class="btn btn-info btn-lg acquirer" >{{ acquire.acquirer_short_name acquire.id }}</button>
                                </div>
                                {% endfor %}
                            </form>
                        </div>
                        <div class="tab-pane" id="tab3">
                            <form class="form-horizontal" action='' method="POST">
                                {% for mode in modepay %}
                                <div class="btn-group">
                                        <button type="button" class="btn btn-info btn-lg mode" >{{ mode.payment_short_name mode.id }}</button>
                                </div>

                                {% endfor %}
                            </form>
                        </div>

                        <div class="tab-pane" id="tab4">
                            <form class="form-horizontal" action="{% url 'insert_value' %}"  method="POST"> {% csrf_token %}
                                <center>
                                <div class="btn-group">
                                    <input id="value_insert_n" name="insert_value" type="number" step="0.010" style="width:250px;font-size: 40px" autofocus>
                                </div>
                                    </center>
                                <center>
                                    <label><input id="typepay_code" name="typepay_code" value="{{ typepay_code }}" type="hidden"></label>
                                    <button type="submit" class="btn btn-primary" >OK</button>
                                </center>

                            </form>
                            <div class="modal-footer">

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

You have to edit your view to receive these values on flask I know you have the request.form.ge["nome do campo"] in the Django nome_do_campo = request.POST.get('nome_do_campo') Note: has to see if the form is POST , but can be request.GET.get('nome_do_campo')

Answer 2

One way is to create hidden fields (type="hidden") within the last form (the form that Submit will take). Each input field will have one name corresponding to each option of the buttons clicked on the previous tabs:

<input type="hidden" name="method">
<input type="hidden" name="acquirer">
<input type="hidden" name="mode">

Once this is done, add any class (a class that is not used anywhere) to each button of the first 3 tabs (for example, put the class .opts_) and also put two attributes data-*, one with the id option and another that identifies the type of the option. For example, on the buttons of the first tab, I put:

<button type="button" data-id="COLOQUE AQUI O ID" data-btn="method"
class="btn btn-info btn-lg method opts_" >{{ method.methodpay_short_name method.id }}</button>

Where has COLOQUE AQUI O ID you will put the id generated by the backend. Note that in the attribute data-btn put the value method. This value is used to group the buttons of this tab. In each tab you will change the value of data-btn. For example, in the second tab, the buttons will have the value data-btn="acquirer". These values will reference the Names of the Hidden inputs of the last form.

Then add a Javascript code that will play the value of data-id from the button clicked on the respective Hidden input of the last form:

<script>
document.addEventListener("DOMContentLoaded", function(){
   var opts_ = document.querySelectorAll(".opts_");
   for(let el of opts_){
      el.onclick = function(){
         document.querySelector("[name='"+this.dataset.btn+"']").value = this.dataset.id;
      }
   }
});
</script>

As stated, when a button is clicked, it will play the value of data-id in the Hidden input that has the name equal to the value of data-btn. When the last form is submitted, it will send these fields with the values clicked by the user to the backend, where you can receive them by the method POST through their name's.