Detect in Javascript which form has been submitted

Question

I have a rating system for a bunch of entries on a website, they are programatically placed in and therefore I have given them a unique form identifier by using a count.

<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>

I also have another hidden field which is the users name here (retrieved in the javascript) but removed it because its large and from a complex session based array.

I've also added the count in a hidden field to help try and sort it out.

From there I'm running a javascript on the click of one of the radio buttons that will grab some more details from the session, and do an AJAX database update.

$(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;
    });
});

This all works fine on the first entry (when I didn't have that count in) but as I am not surprised all the other entries are being treated as the first. The main issue is when I try and update the msg div with its success it only does the first one as it is grabbing the hidden value from the first form, not the form that was actually submitted.

This is all inside a jsp btw.

Answer 1

Use the "this" from the event handler function to look for the form which is the parent.

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

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

});

Pretty sure that's how it works.

Answer 2

First of all, each id should be unique on the page and you shouldn't need any of the ids in your example. This could very well be the root of many issues on your page.

Your code can be simplified quite a bit and you can use the "form" property on an input element to find the associated form. Does this work better for you?

$(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;
    });
});

I wasn't sure what you were trying to do upon successfully saving the form. Let me know and we'll see if we can get it working.