Question

我对网站上的一系列条目有一个评级系统，它们以编程方式放入，因此我使用计数为它们提供了一个唯一的表单标识符。

<form name="star">
    <input type="radio" class="star" name="rating" id ="rating" value="Terribad"/>
    <input type="radio" class="star" name="rating" id ="rating" value="Meh"/>
    <input type="radio" class="star" name="rating" id ="rating" value="OK"/>
    <input type="radio" class="star" name="rating" id ="rating" value="Pretty Good"/>
    <input type="radio" class="star" name="rating" id ="rating" value="Awesome!"/>
    <input type='hidden' name='item' id = 'item' value='<%out.print(item);%>'>
</form>
<span id = "msg<%out.print(item);%>" style = "float:right; margin-left:0px; padding-top:0px;"></span>

我还有另一个隐藏字段，这里是用户名（在javascript中检索）但是因为它的大而且从复杂的基于会话的数组中删除了它。

我还在隐藏字段中添加了计数，以帮助尝试对其进行排序。

从那里我运行一个javascript，点击其中一个单选按钮，从会话中获取更多细节，并进行AJAX数据库更新。

$(function() {
    $(".star").click(function() {
            var submission = document.getElementsByName("rating");
            var name = $("input#name").val();
            var item = $("input#item").val();
            var rating;
            for (i = 0; i< submission.length; i++) {
                    if (submission[i].checked) {
                            rating = submission[i].value;
                    }
            }
            var submitted = 'name='+name + 'rating=' + rating;
            //alert (item);return false;
            $.ajax ({
                    type: "POST",
                    url: "/process_rating.jsp",
                    data: submitted,
                    success: function () {
                            $('#msg'+item).html("Submitted");  

                    }
            });
            return false;
    });
});

这一切在第一个条目（当我没有计数时）工作正常但是我并不感到惊讶所有其他条目被视为第一个。主要问题是，当我尝试更新msg div并成功时，它只执行第一个，因为它从第一个表单中获取隐藏值，而不是实际提交的表单。

这都在jsp顺便说一句。

Answer 1

首先，每个ID在页面上应该是唯一的，您不需要在示例中使用任何ID。这很可能是您网页上许多问题的根源。

您的代码可以简化很多，您可以使用输入元素上的“form”属性来查找关联的表单。这对你有用吗？

$(function() {
    $(".star").click(function() {
        $.ajax ({
            type: "POST",
            url: "/process_rating.jsp",
            data: {
                name: this.form.name,
                rating: $(this).val()
            },
            success: function () {
                // Not sure what you're trying to do here...  Update some input
                // that you didn't show in your code?
                $('#msg').html("Submitted");  
            }
        });
        return false;
    });
});

我不确定您在成功保存表单时想要做什么。让我知道，我们会看看我们是否能让它发挥作用。

Answer 2

使用事件处理函数中的“this”来查找父表单。

$(".star").click(function(){

    var formThatWasSubmitted = $(this).parents("form") 

});

很确定它是如何工作的。

在Javascript中检测哪个表单已提交

2 个答案: