Submitting a Form with Javascript

treeleaf20

All,
I have the following code in a while loop so there are multiple forms on the same page:

<form action="javascript:getsub(document.getElementById('<?php echo "myform_sub".$resultsetstory['comment_id']; ?>'));" name="<?php echo "myform_sub".$resultsetstory['comment_id']; ?>" id="<?php echo "myform_sub".$resultsetstory['comment_id']; ?>">
 <textarea id="comment_sub" cols="70" rows="2"></textarea>
<?php echo "<input id=\"comment_id_sub\" type=\"hidden\" value=\"$resultsetstory[comment_id]\" />"; ?>
<?php echo "<input id=\"user_name\" type=\"hidden\" value=\"$user_name\" />"; ?>
<input type="button" name="button" value="Add Comment" onclick="javascript:getsub(this.<?php echo "myform_sub".$resultsetstory['comment_id']; ?>);">                

</form><br  />

When I submit try and submit say the 3rd or 4th form it submits that latest one. Why won't it submit the correct form? Here is the HTML output so I know it's right:

<form action="javascript:getsub(document.getElementById('myform_sub19'));" name="myform_sub19" id="myform_sub19">
<textarea id="comment_sub" cols="70" rows="2"></textarea>
<input id="comment_id_sub" type="hidden" value="19" />								
<input id="user_name" type="hidden" value="user" />			    

<br /><input type="button" name="button" value="Add Comment" onclick="javascript:getsub(this.myform_sub19);">			    

</form><br  />
<form action="javascript:getsub(document.getElementById('myform_sub18'));" name="myform_sub18" id="myform_sub18">
<textarea id="comment_sub" cols="70" rows="2"></textarea>
<input id="comment_id_sub" type="hidden" value="18" />								
<input id="user_name" type="hidden" value="user" />			    

<br /><input type="button" name="button" value="Add Comment" onclick="javascript:getsub(this.myform_sub18);">			    

</form><br>

So in this example even if I clicked on the 18 one it would submit the 19 one. Any ideas why this is happening?

johanafm

First off, there is no such thing as "this.myform_sub18" as seen in the button onclick attributes. "this" is the button, .myform_sub18 would be the data member myform_sub18 of the button object which does not exist (unless you add it yourself).

Also, the action attribute of the form will never be called by pressing the buttons, unless you do it in the function executed onclick for those buttons (since they are buttons, not submits). But, if you'd do a form submit from within that function, the form itself would call the same function which makes no sense.

treeleaf20

Ok, so I do populate the data in form 18 using the PHP and the hidden fields by using the while loop. So the data is there because when I do the view source the data is correct but it just submits form 19 instead of 18 when I click the button.

Since I'm using the onClick event for a button, would I be able to submit and keep the form action the same? The getsub() is in a javascript file, if I just change the form action to:
form action="getsub(document.getElementById('<?php echo "myform_sub".$resultsetstory['comment_id']; ?>')"

Would this still get called or do I still need the javascript in front of it?

johanafm

What I mean is, you somewhere have a function getsub().

User clicks button, with onclick set to getsub. Your function is called. Form is not submitted. It's a button, not a submit.

However, if getsub does a form submit itself, then the form will be submitted. And what happens then, is that getsub is executed. A second time! Why?

On the other topic, I'm not talking about what data you have. I'm talking about what's NOT a part of the object representing the dom node for an input element. Neither myform_sub18 nor myform_sub19 are parts of this object, so when you have

onclick="getsub(this.myform_sub19);"

What it will evaluate to is

getsub(undefined);

this.type, this.name, this.id, and many many others would all be defined and actually have some kind of value.

treeleaf20

I don't think the form ever gets submitted. I took out the form action and it still doesn't work.

On the second topic, this.myform_sub19 is defined. It's the form id. So it's supposed to take all of the form elements and post them to the getsub function.

The getsub function is:

   function getsub(obj) {
	  var poststr = "comment_sub=" + encodeURI( document.getElementById("comment_sub").value ) +
                    "&comment_id_sub=" + encodeURI( document.getElementById("comment_id_sub").value ) +
					"&user_name=" + encodeURI( document.getElementById("user_name").value );
      makePOSTRequest('updatesubcomments.php', poststr);
   }