0

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

<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 btw里面。

4

2 回答 2

2

首先，每个 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;
    });
});

我不确定您在成功保存表单后要做什么。让我知道，我们会看看我们是否可以让它工作。

于 2010-02-22T05:20:20.837 回答
1

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

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

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

});

很确定这就是它的工作原理。

于 2010-02-22T05:19:27.327 回答