Javascript "onsubmit" for Multiple Forms

[WebMasterMan]

I am using php to retrieve elements from a database. Each element has a form that allows users to add comments using AJAX.

This much is simple enough, but my end goal is to allow users to simply hit enter rather than having to click a submit button.

As far as I know, to do this using AJAX, "onsubmit" must be used to call a function that performs the AJAX and then returns false, so the browser will not load another page.

My problem is caused by every onsubmit function reading the same id variable rather than retaining its own unique id number.

Here is some code of what each form looks like:

<form id='comment_form_<?=$thing_id?>' method='post' iscomment='1' thingid='<?=$thing_id?>'>
	<div>
		<input type='text' id='comment_box_<?=$thing_id?>'/>
	</div>
	<div>
		<input type='submit' value='Add Comment'/>
	</div>
</form>

As you can see each form is given its own unique id based on a PHP variable ("$thing_id"). Notice that the form has the attributes iscomment and thingid.

iscomment is simply so only comment forms are updated.
thingid is the ID number of the element in the database.

Here is the javascript function that is called once the all the forms have been loaded:

function updateCommentSubmit(){
	var commentFormArray = document.getElementsByTagName("form");
	for(var i=0;i<commentFormArray.length;i++){
		isComment = commentFormArray[i].getAttribute("iscomment");
		if(isComment==1){
			var theThingId = commentFormArray[i].getAttribute("thingid");
			commentFormArray[i].onsubmit = function(){
				addComment(theThingId);//This is the ajax function that updates a database
				return false;
			}
		}
	}
}

The problem with this function is that every form seems to end up reading the final value of "theThingId". In other words the only form that will work is the last one.

Basically, assume the last form ID number is 27. When any of the forms are submitted the function called is:
addComment(27);
Even if the form's ID is something entirely different.


I wasn't sure if this question should be posted here or under AJAX, but I think this is more of a basic javascript question than AJAX.

I appreciate any help you can offer. Thanks.

[WebMasterMan]

Well it turns out this is really easy with JQuery.

I just gave all comment forms the class of "comment_form" and then did this:

$(".comment_form").submit(function(){
	var element = $(this);
	var theThingId = element.attr("thingid");
	addComment(theThingId);
	return false;
});