javascript - 如何更改隐藏输入值然后使用 Django 表单发送它？

Question

我在 Django 表单中遇到 Ajax 问题，它拒绝更改隐藏输入的值发送 views.py 类。模板 configuration.html 包含一个用于选择参数数量的表单。此外，我需要使用之前的变量创建一个名为 list_items 的新变量，根据所选参数更改其值，发送它我使用了一个隐藏的输入标签:

<input id="combo" name="combinaison" class="btn btn-success col-lg-12" type="hidden" value="test">

变量被发送到 views.py 但问题是隐藏输入的值没有改变，它总是显示默认值。我尝试使用:

document.getElementsByName("combinaison").value = list_items;

在表单中，但值永远不会改变。这是configuration.html

        {% extends "base.html" %}

    {% load staticfiles %}
    {% block body_block %}

    <!-- Bootstrap core JavaScript-->

<script src="{% static 'staticfiles/vendor/jquery/jquery.min.js' %}"></script>

<script src="{% static 'staticfiles/vendor/bootstrap/js/bootstrap.bundle.min.js' %}"></script>

<!-- Core plugin JavaScript-->
<script src="staticfiles/vendor/jquery-easing/jquery.easing.min.js"></script>

<!-- Custom scripts for all pages-->
<script src="staticfiles/js/sb-admin-2.min.js"></script>

<script src="staticfiles/vendor/app/app_config.js"></script>


            <!-- Begin Page Content -->
        <div class="container-fluid">

            <!-- Grow In Utility -->
            <div class="col-lg-7">

              <div class="card position-relative">
                <div class="card-header py-3">
                  <h6 class="m-0 font-weight-bold text-primary">Parametres</h6>
                </div>
                <div class="card-body">

                  <form action="/try" method="GET">
                       <script>
                       var i = 0;
                       var list_items = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];
                       </script>

                       <h6>Nombre de classifieurs introduits</h6>

                      <select id="N_menu" onChange="Get_value('N_menu')" name="N" aria-controls="dataTable" class="custom-select custom-select-sm form-control form-control-sm"><option value="100"></option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option><option value="13">13</option><option value="14">14</option><option value="15">15</option></select>

                      <script>
                       var value_;
                       function Get_value(id){
                          value_ = document.getElementById(id).value;
                          return value_;
                       }
                      </script>

                      <br>
                      <br>


                      <h6>Choisissez les classifieurs</h6>

                      <select id="choix"  name="here" onchange="Save_choice()" aria-controls="dataTable" class="custom-select custom-select-sm form-control form-control-sm"><option value="100"></option><option value="0">Naive Baise</option><option value="1">Arbre de décision</option><option value="2">Knn()</option><option value="3">Knn (nombre de voisins = 2)</option><option value="4">Knn (nombre de voisins = 7)</option><option value="5">Knn (nombre de voisins = 9)</option><option value="6">Knn (nombre de voisins = 10)</option><option value="7">Knn (nombre de voisins = 15)</option><option value="8">Knn (nombre de voisins = 20)</option><option value="9">Knn (nombre de voisins = 25)</option><option value="10">Knn (nombre de voisins = 30)</option><option value="11">Knn (nombre de voisins = 40)</option><option value="12">SVM (kernel = linear)</option><option value="13">SVM (kernel = poly)</option><option value="14">SVM (kernel = rbf)</option></select>
                      <script>
                            function Save_choice() {
                                if (i < Get_value('N_menu')) {

                                    val_idx = Get_value('choix');

                                    list_items[val_idx] = 1;

                                    i = i + 1;
                                }
                            }

                      </script>


                      <br>
                      <br>
                       <h6>Nombre de Classifieurs finale</h6>

                      <select id="NB_menu" onchange="NB_value()" name="Nb" aria-controls="dataTable" class="custom-select custom-select-sm form-control form-control-sm"><option value="100"></option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option><option value="13">13</option><option value="14">14</option></select>

                      <br>
                      <br>
                       <h6>Choisissez l'algorihme d'optimisation </h6>

                      <select id="optim_menu"  name="algo" aria-controls="dataTable" class="custom-select custom-select-sm form-control form-control-sm"><option value="100"></option><option value="0">Algorithme génétique</option><option value="1">Algorithme hybride</option></select>


                     <input id="combo" name="combinaison" class="btn btn-success col-lg-12" type="hidden" value="test">

                      <br>
                      <br>

                      <div class="col-lg-7" >

                      <div class="card position-relative" style="width: 60%;margin-left: 100%">

                          <button class="btn btn-success col-lg-12" id="btn" onclick="classification()">Enregistrer</button>


                          <script>
                              function classification() {
                                  $(document).ready(function () {
                                      document.getElementsByName("combinaison").value = list_items;
                                      $("#btn").click(function () {
                                          $.ajax({
                                              url: "/try",
                                              type: "GET",
                                              data: {
                                                  N: Get_value('N_menu'),
                                                  Nb: Get_value('Nb_menu'),
                                                  combinaison: Get_value("combo"),
                                                  algo: Get_value('choix'),
                                                  success: function () {
                                                      alert("Submitted succeffully");
                                                  },
                                              },
                                          });
                                      });
                                  });
                              }
                          </script>

                        </div>
                      </div>


                  </form>

                </div>
              </div>

            </div>

            <!-- Fade In Utility -->

          </div>

        </div>

{% endblock %}

这是views.py的函数

def post(request):
    if request.method == "GET": #os request.GET():
        if (request.GET):
            data = request.GET.dict()
            N = data.get("N")
            combinaison = data.get("combinaison")
            Nb = data.get("Nb")
            choix_algo = data.get("algo")            
            return HttpResponse(combinaison)

    else:
        return HttpResponse("nope retry")

这是 url.py 中的 URL 路径

path('try', views.post),

谁能找到问题出在哪里？

Answer 1

您正在以错误的方式更改输入的值document.getElementsByName("combinaison") 为您提供了一个节点列表，您需要选择节点并更改值

document.getElementsByName("组合")[0].value = value_list

上面一行应该可以解决你的问题

最佳实践永远不要使用 className 或任何其他属性来更改像这样的东西尝试使用 ID 以确保只更改必要的输入