Estoy tratando de iterar sobre formularios para me gusta con matraz y AJAX. Funciona si solo hay un formulario y uso obtener elemento por id. ¿Qué estoy haciendo mal en JS al iterar sobre la clase?
HTML:
<form class="like_form" method="POST"> <input type="hidden" name="user_id" value="{{session['logged_in']['id']}}"> <input type="hidden" name="like_id" value="32"> <input type="submit" class="small_submit" value="🤍"> </form> <form class="like_form" method="POST"> <input type="hidden" name="user_id" value="{{session['logged_in']['id']}}"> <input type="hidden" name="like_id" value="32"> <input type="submit" class="small_submit" value="🤍"> </form> var like_form = document.getElementsByClassName('like_form'); for(var i = 0; i < like_form.length; i++){ like_form[i].onsubmit = function(e){ e.preventDefault(); console.log("clicked form") var form = new FormData(like_form) fetch("http://localhost:5000/test/form", { method :'POST', body : form}) .then( response => response.json() ) .then( data => { console.log(data) console.log(data['stars']) const stars = document.getElementById("stars") stars.innerHTML = `💜 ${data['stars']}` }) } }Debe obtener los datos del formulario de un formulario, no la colección de formularios. Para que funcione, sugeriría usar un bucle for..of , con let para obtener el alcance del bloque:
for (let lform of like_form) { lform.onsubmit = function(e) { e.preventDefault(); console.log("clicked form"); var form = new FormData(lform); // <--- Un segundo problema es document.getElementById("stars") . Ese elemento no existe en su HTML. Además, si se supone que este es un elemento relacionado con el formulario (uno para cada formulario), tenga en cuenta que los atributos de id deben ser únicos en HTML, por lo que debe seleccionar dichos elementos de manera diferente.
Terminé teniendo que iterar con el índice :( ¡Funcionó muy bien para cambiar el Me gusta en la página también! Solo usé el índice tanto para enviar como para cambiar el número en la página. Ver like_count[i].value
let like_form = document.getElementsByClassName('like_form'); let like_count = document.getElementsByClassName('like_count'); for(let i = 0; i < like_form.length; i++){ like_form[i].onsubmit = function(e){ e.preventDefault(); console.log("clicked form") var form = new FormData(like_form[i]) fetch("http://localhost:5000/test/form", { method :'POST', body : form}) .then( response => response.json() ) .then( data => { if (data['stars']){ console.log(data) console.log(data['stars']) const stars = document.getElementById("stars") stars.innerHTML = `💜 ${data['stars']}` like_count[i].value = `💜 ${data['num']}` } }) } }