JavaScript 中无法使用 onload() 访问表单元素

Question

我正在将相关的下拉菜单（教师 -> Class -> 学生）放在一起，但在设置下拉菜单的初始状态时遇到了问题。这是代码：

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()
- 为 "id_teacheruserid" 字段

更新 HTML（下拉选项）

update_classes()
- 从 "id_teacheruserid" 字段读取值（初始加载未定义）
- 为 "id_classid" 字段

更新 HTML（下拉选项）

update_students()
- 从 "id_classid" 字段读取值（初始加载未定义）
- 为 "id_partyuserinfo" 字段

更新 HTML（下拉选项）

问题

我看到的问题是脚本无法访问 onload() 调用中表单字段中的值。例如，update_classes() 中的这一行：

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

我直接在这行后面加了一个alert(teacherUserId)。在初始页面加载时，它 returns undefined。但是，当我 select 与教师下拉列表不同的值时，警报会显示预期值。

我的猜测是，在最初的 onload() 中，引用的字段 values/options（即 id_teacheruserid）尚未加载或可用。字段本身存在，但 return undefined 值。但是，一旦此功能完成，它们似乎就可以访问并且菜单的行为符合预期。

我如何运行 update_teachers() 进行初始加载并让它访问表单字段值？

Answer 1

首先你可以使用

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

而不是

$(document.getElementById("id_teacheruserid"))

第二

您需要从下拉列表中获取选项选择值

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

获取选择的ID

第三，成功回调需要调用下一个下拉填充函数

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

JavaScript 中无法使用 onload() 访问表单元素

Can't access form elements with onload() in JavaScript

javascript

forms

field

onload

流程摘要

问题