Q:

Getting textfield contents from AJAX'd form

I'm using AJAX to fetch comments dynamically. This DIV which is hidden is filled with the comments and a form and then made visible. The form is used to add new comments to the currently viewed comments list (back via AJAX).
I want the user to be able to view the comments in the DIV and then add comments to the DIV from the DIV itself.
Everything works, except that I cannot get the contents of the textfield of the comments.
I have $('#submit_comment').live('click', function(e) ... for detecting the AJAX form submit button. This works. I just can't get the string in the text box... it is very annoying, I have tried many methods like `var comment = $('#new_comment').val();' - this doesn't work.
My HTML includes the following:
<form id="new_comment" name="new_comment" method="get" action="comments.php">
                <input type="hidden" id="trackID" value="' . $track . '">
                <input type="text" size="25" id="new_comment_text" /><span style="text-align:right">
                <input type="submit" value="Comment" id="submit_comment"/></span>
            </form>

It is echo'd from comments.php and all held inside a floating DIV.
How can I get the contents of the textfield from an AJAX DIV form??
Here is the full AJAX call:
$('#submit_comment').live('click', function(e) {

        e.preventDefault();

        var comment = $('#new_comment_text').val();
        alert(comment);

        if (comment != '') {

            $('#loading').show();
            $('#commentsPanel').hide();
            // loading = true

            var track = $('#trackID').val();

            alert(track);
            var data = 'track=' + track + '&isComment=true&comment=' + comment;
            alert(data);
            $.ajax({
                url: 'comment.php',
                type: 'GET',
                data: data,
                cache: false,
                success: function (comments_html) {
                    alert('submit_comment');
                    $('#commentsPanel').html(comments_html);
                    $('#commentsPanel').show();
                    $('#loading').hide();
                }
            });
        } 
        else { 

        }   
    });

A:

Your form and text input both have the same id, make the text input element have a unique ID and name.
<form id="new_comment" name="new_comment" method="get" action="comments.php">
    <input type="hidden" id="trackID" value="' . $track . '">
    <input type="text" size="25" id="new_comment_text" name="new_comment_text" /><span style="text-align:right">
    <input type="submit" value="Comment" id="submit_comment"/></span>
</form>

...
var comment = $('#new_comment_text').val(); // Should be the input value.

JSFiddle - http://jsfiddle.net/L74hu/

A:

Could it be that your action vs. url don't quite add up because of the missing s?
form id="new_comment" name="new_comment" method="get" action="comments.php"
vs.
$.ajax({
          url: 'comment.php',

