JavaScript 在提交迭代时通过 class 获取元素

Question

我正在尝试使用 flask 和 AJAX 遍历喜欢的表单。如果只有一个表单并且我使用按 id 获取元素，它就可以工作。迭代 class 时我在 JS 中做错了什么？

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']}` 
            })
    }
}

Answer 1

您需要获取一个个表单的表单数据，而不是表单集合。为了让它工作，我建议使用 for..of 循环，使用 let 来获取块范围：

for (let lform of like_form) {
    lform.onsubmit = function(e) {
        e.preventDefault();
        console.log("clicked form");
        var form = new FormData(lform); // <---

第二期是document.getElementById("stars")。您的 HTML 中不存在该元素。此外，如果这应该是与表单相关的元素（每个表单一个），请注意 id 属性在 HTML 中应该是唯一的，因此您应该 select 这样元素不同。

Answer 2

最终不得不遍历索引:( 改变页面上的喜欢也非常有效！只是将索引用于提交和更改页面上的数字。参见 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']}`
                }
            })
        }
}

JavaScript 在提交迭代时通过 class 获取元素

JavaScript get elements by class on submit iteration

javascript

loops

getelementsbyclassname