I’m not really expert at javascript, but i have a school project where i need to use python flask to make a website.
the problem is that when i input on html, i put the value on javascript array, and then i need to send it to python where i can process the data. Anyone knows how?
Here’s the code:
HTML:
<html>
<head>
<title>4 Years</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<script src="https://kit.fontawesome.com/7006f68f03.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="static/category.css">
</head>
<body>
<img src="static/test.jpeg" height="70">
<hr>
<form class="content" action="/category/list" method="post" id="myform">
<div class="genres-input">
Genres:
<div class="genres-box">
<ul id="genreul">
<input class="input-text" type="text" name="genres" list="genre">
</ul>
<datalist id="genre">
<option value="Action"></option>
<option value="Adventure"></option>
<option value="Animation"></option>
<option value="Biography"></option>
<option value="Comedy"></option>
<option value="Crime"></option>
<option value="Documentary"></option>
<option value="Drama"></option>
<option value="Family"></option>
<option value="Fantasy"></option>
<option value="Film-Noir"></option>
<option value="Game-Show"></option>
<option value="History"></option>
<option value="Horror"></option>
<option value="Music"></option>
<option value="Musical"></option>
<option value="Mystery"></option>
<option value="News"></option>
<option value="Reality-TV"></option>
<option value="Romance"></option>
<option value="Sci-Fi"></option>
<option value="Short"></option>
<option value="Sport"></option>
<option value="Talk-Show"></option>
<option value="Thriller"></option>
<option value="War"></option>
<option value="Western"></option>
</datalist>
</div>
</div>
<div class="age-input">
Ages:
<div class="ages-box">
<input class="input-text" type="number" name="ages" placeholder=" 0 - 99" min="0" max="99">
</div>
</div>
<div class="keywords-input">
Keywords:
<div class="keywords-box">
<ul id="keyul">
<input class="input-text" type="text" name="keywords">
</ul>
</div>
</div>
<div class="type-input">
Types:
<div class="types-box">
<input class="input-text" type="text" name="types" list="type">
<datalist id="type">
<option value="Movie"></option>
<option value="TV Series"></option>
<option value="Short"></option>
<option value="TV Episode"></option>
<option value="TV Mini Series"></option>
<option value="TV Movie"></option>
<option value="TV Special"></option>
<option value="TV Short"></option>
<option value="Video Game"></option>
<option value="Video"></option>
<option value="Music Video"></option>
<option value="Podcast Series"></option>
<option value="Podcast Episode"></option>
</div>
</div>
<div class="search">
<input class="submit" onclick="search_value()" type="button" name="search" value="Search">
</div>
</form>
<script src="static/category.js"></script>
<script src="static/disable_enter.js"></script>
</body>
</html>
JS:
var ul1 = document.querySelector("ul#genreul"),
input1 = ul1.querySelector("input");
let genre_list = [];
var ul2 = document.querySelector("ul#keyul"),
input2 = ul2.querySelector("input");
let keyword_list = [];
function createTag1(){
ul1.querySelectorAll("li#genres").forEach(li => li.remove());
console.log(keyword_list.slice().reverse());
genre_list.slice().reverse().forEach(genre =>{
let liTag1 = `<li id='genres'>${genre} <i class="fa-solid fa-x" onclick="remove1(this,'${genre}')"></i></li>`;
ul1.insertAdjacentHTML("afterbegin", liTag1);
});
}
function createTag2(){
ul2.querySelectorAll("li#keywords").forEach(li => li.remove());
console.log(keyword_list.slice().reverse());
keyword_list.slice().reverse().forEach(keyword =>{
let liTag2 = `<li id='keywords'>${keyword} <i class="fa-solid fa-x" onclick="remove2(this,'${keyword}')"></i></li>`;
ul2.insertAdjacentHTML("afterbegin", liTag2);
});
}
function remove1(element, genre){
let index1 = genre_list.indexOf(genre);
genre_list = [...genre_list.slice(0, index1), ...genre_list.slice(index1 + 1)];
element.parentElement.remove();
}
function remove2(element, keyword){
let index2 = keyword_list.indexOf(keyword);
keyword_list = [...keyword_list.slice(0, index2), ...keyword_list.slice(index2 + 1)];
element.parentElement.remove();
}
function addTag1(e){
if(e.key == "Enter"){
let genre = e.target.value.replace(/s+/g, ' ').replace(',','');
if(genre.length > 1 && !genre_list.includes(genre)){
genre_list.push(genre);
createTag1();
}
e.target.value = "";
}
}
function addTag2(e){
if(e.key == "Enter"){
let keyword = e.target.value.replace(/s+/g, ' ').replace(',','');
if(keyword.length > 1 && !keyword_list.includes(keyword)){
keyword_list.push(keyword);
createTag2();
}
e.target.value = "";
}
}
function search_value() {
console.log(genre_list);
console.log(keyword_list);
document.getElementById("myform").submit();
}
input1.addEventListener("keyup", addTag1);
input2.addEventListener("keyup", addTag2);
Python:
from flask import Blueprint,request,render_template
Category = Blueprint('category',__name__,static_folder='static',template_folder='templates')
@Category.route('/category')
def category_html():return render_template('category.html')
@Category.route('/category/list',methods=['POST','GET'])
def category_value():
#genre =
ages = request.form["ages"]
#keyword =
types = request.form['types']
print(ages,types)
return render_template('list.html',text2=ages,text4=types)
from what i researched, i’ve tried to using xmlhttprequest(), but it seems didn’t work well
Changed JS:
var ul1 = document.querySelector("ul#genreul"),
input1 = ul1.querySelector("input");
let genre_list = [];
var ul2 = document.querySelector("ul#keyul"),
input2 = ul2.querySelector("input");
let keyword_list = [];
function createTag1(){
ul1.querySelectorAll("li#genres").forEach(li => li.remove());
console.log(keyword_list.slice().reverse());
genre_list.slice().reverse().forEach(genre =>{
let liTag1 = `<li id='genres'>${genre} <i class="fa-solid fa-x" onclick="remove1(this,'${genre}')"></i></li>`;
ul1.insertAdjacentHTML("afterbegin", liTag1);
});
}
function createTag2(){
ul2.querySelectorAll("li#keywords").forEach(li => li.remove());
console.log(keyword_list.slice().reverse());
keyword_list.slice().reverse().forEach(keyword =>{
let liTag2 = `<li id='keywords'>${keyword} <i class="fa-solid fa-x" onclick="remove2(this,'${keyword}')"></i></li>`;
ul2.insertAdjacentHTML("afterbegin", liTag2);
});
}
function remove1(element, genre){
let index1 = genre_list.indexOf(genre);
genre_list = [...genre_list.slice(0, index1), ...genre_list.slice(index1 + 1)];
element.parentElement.remove();
}
function remove2(element, keyword){
let index2 = keyword_list.indexOf(keyword);
keyword_list = [...keyword_list.slice(0, index2), ...keyword_list.slice(index2 + 1)];
element.parentElement.remove();
}
function addTag1(e){
if(e.key == "Enter"){
let genre = e.target.value.replace(/s+/g, ' ').replace(',','');
if(genre.length > 1 && !genre_list.includes(genre)){
genre_list.push(genre);
createTag1();
}
e.target.value = "";
}
}
function addTag2(e){
if(e.key == "Enter"){
let keyword = e.target.value.replace(/s+/g, ' ').replace(',','');
if(keyword.length > 1 && !keyword_list.includes(keyword)){
keyword_list.push(keyword);
createTag2();
}
e.target.value = "";
}
}
function search_value() {
console.log(genre_list);
console.log(keyword_list);
var xhr = new XMLHttpRequest();
var url = 'http://127.0.0.1:5000/category';
xhr.open('POST', url, true);
xhr.setRequestHeader('Content-Type', 'application/json');
var jsonData = JSON.stringify({ data: genre_list });
xhr.onreadystatechange = function () {
if (xhr.readyState === XMLHttpRequest.DONE) {
console.log(xhr.responseText);
}
};
xhr.send(jsonData);
}
document.getElementById("myform").addEventListener("submit", search_value);
input1.addEventListener("keyup", addTag1);
input2.addEventListener("keyup", addTag2);
Changed Python:
from flask import Blueprint,request,render_template
Category = Blueprint('category',__name__,static_folder='static',template_folder='templates')
@Category.route('/category')
def category_html():return render_template('category.html')
@Category.route('/category/list',methods=['POST','GET'])
def category_value():
genre = request.get_json(force=True)
print(genre)
ages = request.form["ages"]
#keyword =
types = request.form['types']
print(ages,types)
return render_template('list.html',text2=ages,text4=types)