form won't submit

Question

I have a problem with my form submission and here is the deal. I'm creating an image website and I want to create comments for every image so I have a anchor link which when clicked on shows the comments form, that is loads the html into the web page which wasn't inside at first place, so the form loaded inside the page is not submitting.

Is it possible that forms which are dnynamicly loaded into webpage can't submit? what can be other problems with this? I even tried putting something like <a href="#" id="test">Click me</a> inside the loaded content and I added

$("#test").click(function(){
alert("SOMETHING");
});

to my javascript and it won't alert as well.. what am I doing wrong ?

EDIT

Ok here is how I load form ..

I have an anchor link below my image :

<a href="javascript:;" onclick="showComments('22');" class="answer_comment">Add image content</a>

Here is javascript which is outside document ready function :

function showComments(post){
         var xHTML = "<div class=\"addComment\">";
         xHTML += "<form action=\"<?=base_url()?>images/post_comment/" + post + "\" method=\"post\" id=\"comment_form\" name=\"comment_form\">";
         xHTML += "<input type=\"hidden\" id=\"comment_post_id\" name=\"comment_post_id\" value=\"" +post + "\"/>"; 
         xHTML += "<textarea name=\"comment_text\" class=\"comment\" rows=\"8\" cols=\"40\"></textarea>";
     .....

Like this I fill up my comments form.. need more code ?

Answer 1

Don't you need a { after the function () ?

and a }' before the);` in the third line ?

$("#test").click(function() {
alert("SOMETHING"); 
}); 

Answer 2

Fetching a form using AJAX is usually not a problem.

The only reasons that come to mind why a form wouldn't submit:

• It's not valid HTML - should be possible to find out using firebug

• When submitting, you are addressing it through its ID (like $('#comment_form').submit();) which fails because there is already some element with that ID. To find out whether this is the case, try injecting a normal <input type=submit> inside the form and see whether that works.

• You are injecting it into another <form> element - easy to find out with Firebug

Answer 3

You are adding an extra { to your code at the end:

$("#test").click(function()
alert("SOMETHING");
{);

Correct that and if it still doesn't work, try this which uses live method which works for present as well as future elements.

$("#test").live('click', function(){
  alert("something");
});

Also, make sure that if there are more than one forms, they are not over-lapping.

Answer 4

Dynamically added forms should behave the same as the ones to be found in the original html. Make sure that you add the event handler after the element is added or that you use the live method.

Answer 5

Dynamically loaded elements have to be rigged up as well in your case to alert, you want:

$("#test").live('click', function() {
  alert("SOMETHING");
});

This will fire for any element with id="test", whether it's ajax loaded or not. The same style should be used for whatever handler you want to use. Read the .live() documentation for the full story...basically it sits up at the root DOM level listening for clicks and acts on them, so it doesn't care what was or wasn't there when you defined the event handler, which is what you want for dynamically loaded content.