Question

I am submitting a form via a jqery function that’s dynamically created with using php and a while loop. The form gets submitted correctly the first time and I generate html and display it using .html(response). I replicate the code so that the function will work again, however it doesn’t. When I submit the form a second time (without a page refresh), the form sends me to the action attribute.

Is this a limitation of jquery?

My code:

<script type="text/javascript">
$(document).ready(function() {

$("#submit<? echo"$counter$counter";?>").click(function() {

var action = $("#commentform<? echo "$counter$counter";?>").attr('action');
var form_data = {
comment: $("#comment<? echo "$counter$counter";?>").val(),
type: $("#commenttype<? echo "$counter$counter";?>").val(),
typeid: $("#commenttypeid<? echo "$counter$counter";?>").val(),
counter: $("#commentcounter<? echo "$counter$counter";?>").val(),
is_ajax: 1
};

$.ajax({
type: "POST",
url: action,
data: form_data,
success: function(response)
{
$("#commentarea<? echo"$counter$counter";?>").html(response);
}
});
return false;
});
});
</script>

My form that’s on the same page as the script I am running:

<div class="postcommentscomment" style="size:10px; font-family:Verdana, Geneva, sans-serif;">
<form action="php/comment.php" id="commentform<? echo "$counter$counter";?>" method="post" name="comment" target="_self">
<textarea id="comment<? echo "$counter$counter";?>" style="width:162px; height:24px; color:#827e78; font-size:10px;">comment here</textarea>
<div style="float:right; position:relative; margin-top:5px;">
<input id="commenttype<? echo "$counter$counter";?>" type="hidden" value="<? echo $type;?>" />
<input id="commenttypeid<? echo "$counter$counter";?>" type="hidden" value="<? echo $id;?>" />
<input id="commentcounter<? echo "$counter$counter";?>" type="hidden" value="<? echo "$counter$counter";?>" />
<input id="submit<? echo"$counter$counter";?>" type="button" value="comment"/>
</div>
</form>
</div>

My form on the html(response) page via the action attribute

<div class="postcommentscomment" style="size:10px; font-family:Verdana, Geneva, sans-serif;">
<form action="php/comment.php" id="commentform<? echo "$counter";?>" method="post" name="comment" target="_self">
<textarea id="comment<? echo "$counter";?>" style="width:162px; height:24px; color:#827e78; font-size:10px;">comment here</textarea>
<div style="float:right; position:relative; margin-top:5px;">
<input id="commenttype<? echo "$counter";?>" type="hidden" value="<? echo $type;?>" />
<input id="commenttypeid<? echo "$counter";?>" type="hidden" value="<? echo $id;?>" />
<input id="commentcounter<? echo "$counter";?>" type="hidden" value="<? echo "$counter";?>" />
<input id="submit<? echo"$counter";?>" type="button" value="comment"/>
</div>
</form>
</div>

NOTE: The counter php variable is set such that $counter on the html(response) page produces an equivalent result as $counter$counter on the original page.

So, I submit a comment, the comment gets inserted into the database, then a query is run, a form is reproduced and displayed on the original page via html(response). When I then try to submit a new comment I get redirected to the action page. I stopped that by changing “submit” to “button”, but that doesn’t give me the result I want — which is to be able to submit the form again.

Not sure if this is a jquery limitation or a problem with my code.

Also, the comments are on a page that has may different posts. So multiple comment forms. If there is a better way to execute a ajax refresh of the comments for a specific post, I am open to changing code.

Answer 1

Your code is executed on document ready, if you would insert that code a second time, document ready won’t fire again.

You could attach your function to the submit handler of the form…

$('.postcommentscomment form').submit(function() {

    var form_data = $(this).serialize();

    //your ajax call

});

You should be able to execute this piece of code every time you insert a form, the serialize function is a more easy option compared to getting all input values by id and saves you from all those silly inline php counter echo’s.