如何在Django中使用onsubmit函数实现页面跳转？

问题根源分析 #

你的代码存在三个关键问题：

1. 表单默认提交行为未阻止：点击提交按钮时，浏览器会默认发送表单请求并刷新页面，导致JS跳转逻辑被中断。
2. 静态JS文件无法解析Django模板标签：login.js是静态文件，Django不会对其进行模板渲染，{% url 'home' %}会被当作普通字符串，无法生成正确的首页URL。
3. JS引入语法错误：HTML里的<script src="{% static 'login.js'}">多了一个闭合的}，应为{% static 'login.js' %}，会导致JS文件加载失败。

修复方案（两种可选，推荐第一种） #

方案一：把JS逻辑写在HTML模板中（适合新手）

修改登录页面模板，将JS代码移到模板内，确保模板标签能被正常解析，同时阻止表单默认行为：

{% extends 'base.html' %}{% load static %} 
{% block head %}
<link rel="stylesheet" href="{% static 'login.css' %}" />
{% endblock %}

{% block pagename %}
<p>SIGN IN</p>
{% endblock %}

{% block content %}
<div class="contentContainer">
    <p>Please enter your competition ID:</p>
    <!-- 给onsubmit添加return，阻止默认提交行为 -->
    <form class="form" onsubmit="return pageSwitch()">
        <input type="text" id="entry" placeholder="ID ENTRY HERE...">
        <input type="submit" id="entrySubmit" value="SUBMIT">
    </form>
</div>
{% endblock %}

<!-- 新增script块，放在content块之后 -->
<script>
function pageSwitch(){
    // 模板标签在这里会被Django解析成正确的首页URL
    window.location.replace("{% url 'home' %}");
    // 返回false阻止表单默认提交逻辑
    return false;
}
</script>

方案二：保留静态JS文件，传递URL到JS中

1. 先修复HTML里的JS引入错误：

<script src="{% static 'login.js' %}"></script>

2. 在表单元素上添加data属性存储首页URL：

<form class="form" data-home-url="{% url 'home' %}" onsubmit="return pageSwitch(this)">

3. 修改login.js代码：

function pageSwitch(form){
    // 从表单的data属性获取正确的首页URL
    window.location.replace(form.dataset.homeUrl);
    // 阻止表单默认提交
    return false;
}

额外简化方案 #

如果不需要提交表单数据到后端，可直接把提交按钮改成普通按钮，用onclick触发跳转，无需处理表单默认行为：

<input type="button" id="entrySubmit" value="SUBMIT" onclick="window.location.replace('{% url 'home' %}')">

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