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_templateCategory = 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_templateCategory = 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)
