How do I use the onsubmit function in Django to switch pages? - html

Question

I'm trying to create a page that, once a form submit button is clicked, will redirect to the home page. I'm using the 'onsubmit' function for that, but it isn't working.
HTML code
{% extends 'base.html' %}{% load static %}
{% block head %}
<link rel="stylesheet" href="{% static 'login.css' %}" />
<script src="{% static 'login.js'}"></script>
{% endblock %}
<!-- page code -->
{% block pagename %}
<p>SIGN IN</p>
{% endblock %}
{% block content %}
<div class="contentContainer">
<p>Please enter your competition ID:</p>
<form class="form" onsubmit="pageSwitch()">
<input type="text" id="entry" placeholder="ID ENTRY HERE...">
<input type="submit" id="entrySubmit" value="SUBMIT">
</form>
</div>
{% endblock %}
JS Code
function pageSwitch(){
window.location.replace("{% url 'home' %}");
}
urls.py Code
from django.contrib import admin
from django.urls import path
from files import views
from django.conf import settings
from django.conf.urls.static import static
urlpatterns = [
path('admin/', admin.site.urls),
path('test/', views.test, name='test'),
path('', views.login, name='login'),
path('home/', views.home, name='home'),
path('leaderboard/', views.lboard, name='lboard'),
path('scorecard/', views.score, name='score'),
path('submit/', views.submit, name='submit'),
path('base/', views.base, name='base'),
] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
'views.py' Code
from django.shortcuts import render
# Create your views here.
def test(request):
return render(request, 'test.html')
def base(request):
return render(request, 'base.html')
def login(request):
return render(request, 'login.html')
def home(request):
return render(request, 'home.html')
def lboard(request):
return render(request, 'leaderboard.html')
def score(request):
return render(request, 'score.html')
def submit(request):
return render(request, 'submit.html')
def base(request):
return render(request, 'base.html')
I'm not really sure what else to try, I've been messing around with either using anchors and 'onclick' instead, but that hasn't worked either, so I'm a bit stuck. This is my first time using Django, so all of the other explanations I've found have been a bit too complex for me to understand, including things that aren't in my code that have thrown me off a bit.

Answer 1

When using a form's onsubmit event to call a function and redirect to another page, it's important to prevent the default form submission behavior, which can interfere with the redirect. One solution is to add an event parameter to the function, and then use event.preventDefault() to stop the form submission. For example:
<form onsubmit="myFunction(event)">
...
</form>
<script>
function myFunction(event) {
event.preventDefault();
window.location.replace('https://example.com');
}
</script>
This way, the preventDefault() method will be called before the form is submitted, ensuring that the redirect will happen immediately.