Html - Can't make dynamic page changes

Anton
September 10, 2024
138 views
1 vote
2 Answers

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 %}

Answers

Refreshing the page is the default behaviour for a submit type action. You have to prevent this default behaviour using e.preventDefault(). Your code will look like:-

create_matrix.js

function create_matrix(e){
    e.preventDefault();
    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') {
           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(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 %}

I think there is unclear point about what you want to do. I understood that you want to create matrix means putting random values in input number HTML DOM. Therefore you do not need to submit the form to server. If you submit your form to the server, it hands your request and responds to the same HTML file again. As a result, you always have a original empty form in HTML.

Solution: Please; define your input element to run create_matrix method in below:

<button type="button" onclick="create_matrix()">Generate</button>

Then change your method to validate input number value as if it is empty or null or NaN.

function create_matrix(){
    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;

    if(isNaN(parseInt(rows1))){
        alert("rows_1_matrix should be a Number");
        return false;
    }else if(isNaN(parseInt(columns1))){
        alert("columns_1_matrix should be a Number");
        return false;
    }else if(isNaN(parseInt(rows2))){
        alert("rows_2_matrix should be a Number");
        return false;
    }else if(isNaN(parseInt(columns2))){
        alert("columns_2_matrix should be a Number");
        return false;
    }
    return true;

}

create_matrix runs as a validator for your input. If you send input values to the server after validating you can use ajax with jquery or with pure js. Balraj Singh was right. You have to prevent your default form submit action. Therefore we can change our create_matrix method as submit data after validating the inputs. You can check ajax from here https://www.w3schools.com/xml/ajax_intro.asp.

views.py

from django.http import HttpResponse
from django.shortcuts import render
from django.views.decorators.csrf import csrf_exempt

@csrf_exempt
def adding(request):
    if request.method == 'POST':
        print("I get the posting data")
        return HttpResponse("I get the posting data")
    elif request.method == 'GET':
        return render(request, 'matrix_app/adding_matrix.html')

create_matrix.js

function create_matrix(){
    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;

    if(isNaN(parseInt(rows1))){
        alert("rows_1_matrix should be a Number");
        return false;
    }else if(isNaN(parseInt(columns1))){
        alert("columns_1_matrix should be a Number");
        return false;
    }else if(isNaN(parseInt(rows2))){
        alert("rows_2_matrix should be a Number");
        return false;
    }else if(isNaN(parseInt(columns2))){
        alert("columns_2_matrix should be a Number");
        return false;
    }
    const xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
          alert("POST is succesfull");
        }
      };
      xhttp.open("POST", "/create-matrix/", true);
      xhttp.send();


}

Please signup or login to give your own answer.

Click here to cancel reply.

Html – Can't make dynamic page changes

Answers