Form Submission 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?

[Psycho]

Without seeing the function getsub() there's no way to know what should be submitted. But, you are making it more difficult than it needs to be. You don't need to use getElementById() in your function call - just use 'this' which will reference the object making the call

 

<form action="gosub(this);">

[treeleaf20]

I don't actually submit the form, it's just an onclick event for the button. If I just use this in the getsub(this) will that submit the correct form instead of the top one?

 

Here is the getsub():

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

 

[treeleaf20]

I just updated the code to use the this and it still doesn't work. It only submits the variables in the final form instead of the one that I try and submit. I can't figure out why it's doing that at all.

[treeleaf20]

I tried to change it to this:

<form action="javascript:getsub(this);" name="<?php echo "myform_sub".$resultsetstory['comment_id']; ?>" id="<?php echo "myform_sub".$resultsetstory['comment_id']; ?>">
<?php echo "The comment id is ".$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\" />"; ?>
<br /><input type="submit" name="submit" value="Add Comment">			    
</form>

 

It still has the same behavior...

[Psycho]

I guess you are going to make me relpeat myself:

 

[quiote]Without seeing the function getsub() there's no way to know what should be submitted

 

There's nothing wrong that I can see with the code you have and, yes, using "this" as the parameter will pass an object reference of the object makign the call - in this instance the form object from which the onsubmit was called.

[kickstart]

Hi

 

In getSub you do not appear to refer to the fields in any particular form. You pass in the reference to the form but never use it.

 

Also you appear to have the same action on submit of the form as you have in the button to submit the form.

 

All the best

 

Keith

[treeleaf20]

If you look at the getsub function it only takes one argument (the conentd of the form) and then breaks them out in the document.getElementbyId an then specifically call out the form objects in there and put them in variables and I post them to the URL that is specified.

[treeleaf20]

Also, the last one works so I know the function works. It's just the other forms in the while loops don't submit right. I also changed the button to a submit and only put the getsub() in the form action. Still doesn't work. It seems like all the code is correct since it works with one but not the other. Extremely frustrating.

[kickstart]

If you look at the getsub function it only takes one argument (the conentd of the form) and then breaks them out in the document.getElementbyId an then specifically call out the form objects in there and put them in variables and I post them to the URL that is specified.

 

Nothing in getsub makes any reference to the obj field that you pass in.

 

Passing in obj does not mean that a reference in the function to document.getElementById("comment_id_sub").value will pick up the value of comment_id_sub from that particular form.

 

Rough bit of playing around to demonstrate.

 

<html>
<head>
<script>
   function getsub(obj) {
     var poststr = "comment_sub=" + encodeURI( document.forms[obj].comment_sub.value ) +
                    "&comment_id_sub=" + encodeURI( document.forms[obj].comment_id_sub.value ) +
               "&user_name=" + encodeURI( document.forms[obj].user_name.value );
      alert (poststr);
   }
   </script>
</head>
<body>
<form action="javascript:getsub('form1');" name="form1" id="form1">
<textarea id="comment_sub" id="comment_sub" cols="70" rows="2"></textarea>
<input id="comment_id_sub"  name="comment_id_sub" type="hidden" value="1" />
<input id="user_name" id="user_name" type="hidden" value="fred" />
<input type="submit" name="submit" value="Add Comment">            
</form>
<form action="javascript:getsub('form2');" name="form2" id="form2">
<textarea id="comment_sub" id="comment_sub" cols="70" rows="2"></textarea>
<input id="comment_id_sub"  name="comment_id_sub" type="hidden" value="2" />
<input id="user_name" id="user_name" type="hidden" value="bill" />
<input type="submit" name="submit" value="Add Comment">            
</form>
<form action="javascript:getsub('form3');" name="form3" id="form2">
<textarea id="comment_sub" id="comment_sub" cols="70" rows="2"></textarea>
<input id="comment_id_sub"  name="comment_id_sub" type="hidden" value="3" />
<input id="user_name" id="user_name" type="hidden" value="gill" />
<input type="submit" name="submit" value="Add Comment">            
</form>
</body>
</html>

 

All the best

 

Keith

[treeleaf20]

Thank you so much. That did the trick.