无法实现动态页面交互：提交表单时页面刷新，未触发空输入提示

你的代码存在几个关键问题，导致提交时页面直接刷新且未输入内容时不弹出提示，逐一修复如下：

1. 表单提交未阻止默认行为 #

表单的onsubmit事件默认会触发页面刷新，必须在验证不通过时拦截这个默认行为，才能让提示框正常显示。

2. 错误获取输入框内容 #

input元素的用户输入存储在value属性中，而非textContent（后者用于获取标签内部的文本内容，比如div、p标签的文字），所以获取值的方式需要修正。

3. 验证逻辑漏洞 #

• 未输入内容时，input的value是空字符串""，你的判断条件nums[i] === false没覆盖这种场景
• 变量nums未用let声明，会变成全局变量，不符合代码规范
• 提示文本存在拼写错误：ruqired应为required，且要匹配需求里的“当前未输入任何内容”

4. HTML模板语法错误 #

模板继承标签开头缺失{，正确写法是{% extends 'base.html' %}

修改后的完整代码： #

views.py（无需修改）

def adding(request):
    return render(request, 'matrix_app/adding_matrix.html')

create_matrix.js

function create_matrix(event){
    // 改用value获取输入框内容
    let rows1 = document.getElementById("rows_1_matrix").value;
    let columns1 = document.getElementById("columns_1_matrix").value;
    let rows2 = document.getElementById("rows_2_matrix").value;
    let columns2 = document.getElementById("columns_2_matrix").value;

    let nums = [rows1, rows2, columns1, columns2];
    for(let i = 0; i < 4; i++){
        // 判断是否为空（未输入内容）
        if (!nums[i]) {
            alert("当前未输入任何内容");
            // 阻止表单默认提交行为
            event.preventDefault();
            return;
        }
    }
}

adding_matrix.html

{% extends 'base.html' %}
{% load static %}
{% block content %}
<script src="{% static 'js/create_matrix.js' %}"></script>
<!-- 向函数传入event对象，用于拦截默认行为 -->
<form onsubmit="create_matrix(event)" id="matrix" method="post">
  {% csrf_token %}
  <div>
    <label>text</label>
    <input type="number" id="rows_1_matrix"/>
  </div>
  <div>
    <label>text</label>
    <input type="number" id="columns_1_matrix"/>
  </div>
  <div>
    <label>text</label>
    <input type="number" id="rows_2_matrix" />
  </div>
  <div>
    <label>text</label>
    <input type="number" id="columns_2_matrix"/>
  </div>
  <input type="submit" value="generate"/>
</form>


<a href="/operations"><button>Back</button></a>
{% endblock %}

修改后，当存在未输入的字段时，会弹出提示框且页面不刷新；所有字段都输入内容后，表单才会正常提交（如果需要完全无刷新的动态处理，还可以在此基础上扩展AJAX提交逻辑）。

内容的提问来源于stack exchange，提问作者Anton