Не удается получить доступ к элементам формы с помощью onload () в JavaScript - PullRequest
Новая
       13

Не удается получить доступ к элементам формы с помощью onload () в JavaScript

0 голосов
/ 04 июля 2018

Я собираю зависимые раскрывающиеся списки (Учитель -> Класс -> Ученик) и у меня возникают проблемы с настройкой начального состояния раскрывающихся списков. Вот код:

edit_contract.html 

{% load crispy_forms_tags %}    
<div>
    <form method="post" id="contractForm" novalidate 
        data-teachers-url="{% url 'wakemeup:ajax_load_teachers' %}" 
        data-classes-url="{% url 'wakemeup:ajax_load_classes' %}" 
        data-students-url="{% url 'wakemeup:ajax_load_students' %}" 
    >
        {% crispy form %}
    </form>
</div>

<script>
    // Update class drop-down when teacher changes
    $("#id_teacheruserid").change(function () {
        update_classes($(this))
      });

    // Update students drop-down when class changes
    $("#id_classid").change(function () {
        update_students($(this))
      });

    function update_teachers() {
        // Get form values
        var url = $("#contractForm").attr("data-teachers-url");
        var contractId = $(document.getElementById("id_contractid")).val();

        $.ajax({                             // initialize AJAX request
          url: url,                         
          data: {
            'contractid': contractId
          },
          success: function (data) {            
            $("#id_teacheruserid").html(data);  // Update "teacheruserid" field
          }
        })

        update_classes(); // Update classes drop-down
    };

    function update_classes() {
        // Get form values
        var url = $("#contractForm").attr("data-classes-url");
        var teacherUserId = $(document.getElementById("id_teacheruserid")).val();
        var contractId = $(document.getElementById("id_contractid")).val();

        $.ajax({                            // initialize AJAX request
          url: url,                         
          data: {
            'teacheruserid': teacherUserId, 
            'contractid': contractId
          },
          success: function (data) {        
            $("#id_classid").html(data);       // Update "classid" field
          }
        })

        update_students(); // Update students drop-down
    };

    function update_students() {
        // Get form values
        var url = $("#contractForm").attr("data-students-url");
        var classId = $(document.getElementById("id_classid")).val();
        var contractId = $(document.getElementById("id_contractid")).val();

        $.ajax({                                // initialize AJAX request
          url: url,                                 
          data: {
            'classid': classId,                     
            'contractid': contractId
          },
          success: function (data) {                
            $("#id_partyuserinfo").html(data);      // Update "partyuserinfo" field
          }
        })
    };

    window.onload = function() {
        // Initial load of drop-down menus
        update_teachers(); // Cascades to update_classes() and update_students()
    };      
</script>

Краткое описание потока

update_teacher ()
- обновить HTML (раскрывающиеся опции) для поля "id_teacheruserid"

update_classes ()
- прочитать значение из поля "id_teacheruserid" (не определено для начальной загрузки)
- обновить HTML (раскрывающиеся опции) для поля "id_classid"

update_students ()
- прочитать значение из поля "id_classid" (не определено для начальной загрузки)
- обновить HTML (раскрывающиеся опции) для поля "id_partyuserinfo"

проблема

Проблема, с которой я сталкиваюсь, заключается в том, что скрипт не может получить доступ к значениям в полях формы при вызове onload(). Например, эта строка в update_classes(): 

    var teacherUserId = $(document.getElementById("id_teacheruserid")).val();

Я добавил alert(teacherUserId) сразу после этой строки. При начальной загрузке страницы возвращается undefined. Однако, когда я выбираю другое значение из раскрывающегося списка учителя, в предупреждении отображается ожидаемое значение.

Я предполагаю, что в начальных значениях / 1038 * указанные значения / опции полей (т. Е. id_teacheruserid) еще не были загружены или сделаны доступными. Сами поля существуют, но возвращают undefined значений. Однако когда эта функция завершается, кажется, что они становятся доступными, и меню ведут себя, как и ожидалось.

Как запустить update_teachers(), чтобы выполнить начальную загрузку и получить доступ к значениям поля формы?

1 Ответ

0 голосов
/ 04 июля 2018

Прежде всего вы можете использовать 

$("#id_teacheruserid").val();

вместо 

$(document.getElementById("id_teacheruserid"))

Второй

вам нужно выбрать выбранное значение из выпадающего списка 

$("#id_teacheruserid").find(":selected").val()

для получения выбранного идентификатора

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

$.ajax({                             // initialize AJAX request
          url: url,                         
          data: {
            'contractid': contractId
          },
          success: function (data) {            
            $("#id_teacheruserid").html(data);  // Update "teacheruserid" field
             update_classes();
          }
        })
...