Два вызова Ajax отвечают только одному условию за раз

Question

У меня есть следующий скрипт, который отправляет POST моей опции выбора на URL с именем requesttaccess. Это прекрасно работает при использовании только одного из двух, но когда я изменяю другое поле, результатом POST будет None для первого и правильный для второго и наоборот.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<select title ="accesslevelid" class="form-control" id="accesslevelid" onclick="accesslevelid">
            <option value=""> Please select your access level  </option>
            <option value="7"> Facility  </option>
            <option value="5"> Division  </option>
            <option value = "3"> Corporate  </option>
            <option value = "6"> Market  </option>
            <option value = "4"> Group  </option>
</select>
<script>
$(document).ready(function () {
    $('#accesslevelid').on('click', function () {
        var accesslevelid = $(this).val();
        $.ajax({ url: "{% url 'requestaccess' %}",
                headers: { 'X-CSRFToken': '{{ csrf_token }}' },
                data: {
                  accesslevelid: accesslevelid,
                },
                type: 'POST',
                success: function (result) {
                  ;
                },
              });
      });
  });
</script>
        </div>
        <div class="col">


          <label for="phi"><h3>PHI</h3></label>

          <select class="form-control" id="phi" title = "phi" onclick="phi">
            <option value = ""> Please select if you need access to PHI data </option>
            <option value = "0"> No  </option>
            <option value = "1"> Yes  </option>

          </select>
          <script>
          $(document).ready(function () {
              $('#phi').on('click', function () {
                  var phi = $(this).val();
                  $.ajax({ url: "{% url 'requestaccess' %}",
                          headers: { 'X-CSRFToken': '{{ csrf_token }}' },
                          data: {
                            phi: phi,
                          },
                          type: 'POST',
                          success: function (result) {
                            ;
                          },
                        });
                });
            });
          </script>

Мой взгляд получает значение POST со следующим:

selectedaccesslevel = request.POST.get('accesslevelid')
print(selectedaccesslevel)
selectedphi = request.POST.get('phi')
print(selectedphi)

Тем не менее, моя печать либо отображается как:

None
1 or 2

or 

7, 5, 3, 6, 4
None.

Мои желаемые результаты должны отображаться как:

7, 5, 3, 6, or 4
1 or 2

Answer 1

Может быть, просто написать одну функцию щелчка для обоих селекторов, то есть каждый раз, когда вы щелкаете по любому из селекторов, вы выбираете оба значения и передаете их в представление, что-то вроде этого

 $(document).ready(function () {
          $('.my_select').on('click', function () {
              var phi = $('#phi').val();
              var accesslevelid = $('#accesslevelid ').val();
              $.ajax({ url: "{% url 'requestaccess' %}",
                      headers: { 'X-CSRFToken': '{{ csrf_token }}' },
                      data: {
                        phi: phi,
                        accesslevelid: accesslevelid
                      },
                      type: 'POST',
                      success: function (result) {
                        ;
                      },
                    });
            });
        });

не забудьте добавить имя класса "my_select" в оба ваших выбора.

<select class="form-control my_select" id="phi" title = "phi" >
<select title ="accesslevelid" class="form-control my_select" id="accesslevelid">