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('subm开发者_运维知识库it_comment');
                    $('#commentsPanel').html(comments_html);
                    $('#commentsPanel').show();
                    $('#loading').hide();
                }
            });
        } 
        else { 

        }   
    });

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/

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',

try sending data in an object like this:

$.ajax({
    url: 'comment.php',
    type: 'GET',
    data: {data:data},
    cache: false,
    success: function (comments_html) {

        alert('submit_comment');
        $('#commentsPanel').html(comments_html);
        $('#commentsPanel').show();
        $('#loading').hide();
    }
});

because $('#new_comment_text').val(); woeked with me in the front end

var comment = $('#new_comment').val()

Won't work (or probably not) because you have the same ID twice:

form  id="new_comment"
input id="new_comment"

You should use a different ID and it should be OK