Question

我正在使用AJAX动态获取评论。隐藏的这个DIV填充了注释和表单，然后变得可见。该表单用于向当前查看的评论列表添加新评论（通过AJAX返回）。

我希望用户能够在DIV中查看评论，然后从DIV本身向DIV添加评论。

一切正常，但我无法获得评论文本字段的内容。

我有$('#submit_comment').live('click', function(e) ...来检测AJAX表单提交按钮。这有效。我只是无法在文本框中获取字符串...这非常烦人，我尝试过很多方法，例如`var comment = $（'＃new_comment'）。val（）;' - 这不起作用。

我的HTML包含以下内容：

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

它是来自comments.php并且所有内容都保存在浮动DIV中。

如何从AJAX DIV表单中获取文本字段的内容？

以下是完整的AJAX调用：

$('#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 { 

        }   
    });

Answer 1

您的表单和文本输入都具有相同的ID，使文本输入元素具有唯一的ID和名称。

<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/

Answer 2

由于缺少s，您的行动与网址是否完全相加？

form id="new_comment" name="new_comment" method="get" action="comments.php"

VS

$.ajax({
          url: 'comment.php',

Answer 3

尝试在这样的对象中发送数据：

$.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();
    }
});

因为$('#new_comment_text').val();在前端困扰着我

Answer 4

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

不会工作（或可能不会），因为您有两次相同的ID：

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

您应该使用不同的ID，它应该没问题

从AJAX表单获取文本字段内容

4 个答案: