Can’t make dynamic page changes

I want to make a dynamic page, but when I make a request the page just refreshes, although it should return an alert when no data is entered (I have not entered any).

views.py

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

create_matrix.js

function create_matrix(){
    let rows1 = document.getElementById("rows_1_matrix").textContent;
    let columns1 = document.getElementById("columns_1_matrix").textContent;
    let rows2 = document.getElementById("rows_2_matrix").textContent;
    let columns2 = document.getElementById("columns_2_matrix").textContent;

    nums = [rows1, rows2, columns1, columns2];
    for(let i = 0; i < 4; i++){
        if (nums[i] === false || nums[i] === '0') {
           return alert("All fields are ruqired");
        }
    }
}

adding_matrix.html

% extends 'base.html' %}
{% load static %}
{% block content %}
<script src="{% static 'js/create_matrix.js' %}"></script>
<form onsubmit="create_matrix()" 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 %}