JQuery $.post on a submit event help
<p>What I am trying to do is:</p>

<p>When you click on a form submit button, the page doesn't reload, instead data from form is send to another page for processing and HTML output of that page replaces the form on current page. More specifically, I am trying to get the add comment form working without a need to reload the page (there is a video streaming in a flash player on that page and if the page would reload each time someone submitted a comment it would waste tons of money and bandwidth).</p>

<p>Here is the form markup:</p>

<pre><code>&lt;div id="add-media-comment"&gt;
    &lt;form enctype="application/x-www-form-urlencoded" method="post" action="/view/add-media-comment/id/12"&gt;&lt;ol&gt;
    &lt;li&gt;&lt;label for="body" class="required"&gt;Body&lt;/label&gt;
    &lt;div class="element"&gt;
    &lt;textarea name="body" id="body" rows="10" cols="50"&gt;&lt;/textarea&gt;&lt;/div&gt;&lt;/li&gt;
    &lt;li&gt;&lt;div class="button"&gt;
    &lt;input type="submit" name="add_comment" id="add_comment" value="Submit" class="input-submit" /&gt;&lt;/div&gt;&lt;/li&gt;&lt;/ol&gt;&lt;/form&gt;
&lt;/div&gt;
</code></pre>

<p>And here is the javascript code I'm using:</p>

<pre><code>$('#add-media-comment form').submit(function() {
    // this is taken from the same page
    // I have tested this with alert() and yes
    // it is returning correct values
    var id = $('#media-photo img').attr('id');
    var url = '/view/add-media-comment/id/' + id;

    // let's submit the form to another page
    $.post(url, $(this).serialize(), function() {
        // and replace the content of #add-media-comment
        // with the resulting HTML from the submission page
        $('#add-media-comment').html(data);
    }, 'html');

    return false;
});
</code></pre>

<p>What happens is that after clicking on the submit button exactly nothing happens. The page doesn't reload but the code on the page where I'm submitting the form doesn't get executed either.</p>
