Question

在应用中，用户发帖并对提交的每个帖子发表评论。

每个帖子下面都有一个表单用于评论，每个评论表单都有附加到表单名称的帖子的唯一ID，表单中的字段也是如此。

我能够通过ajax将所有帖子发送到服务器，但获取表单值和参数以发送每个帖子上发表的每条评论都非常困难。

挑战：

获取formId以及表单中的fieldsId（via：document.getElementById（unknownUniqueId）.value），用户通过该文件尝试发表评论并通过ajax函数处理它，该函数旨在将它们发送到php脚本

创建commennt表单的行：

allPostDivBox = allPostDivBox + '<div class="show_comment_formbox"><form id="formPostComment" onSubmit="return blockCommentSubmit();"><input type="text" id="post_comment' + getPostId + '" name="post_comment' + getPostId + '" maxlength="150" /><input class="comment_btn" type="button" name="comment_submit" value="Post Comment" onClick="javascript:sendCommentFunc();" /> <input type="hidden" id="commenter_mid" name="commenter_mid" value="1" /> <input type="hidden" id="get_post_id' + getPostId + '" name="get_post_id" value="' + getPostId + '" /> <div class="clear"></div></form></div>';

完整的Javascript函数，用于显示帖子，评论以及创建评论表单：

// Receives response from server for all post and comment
function statusPostReceivedHandler(){
   if (getStatusPost.readyState == 4){
      if (getStatusPost.status == 200){

         var post_holder_div = document.getElementById('status_update_msg_area');
         post_holder_div.innerHTML = '';

         var allPostDivBox;

         var xmldoc = getStatusPost.responseXML;
         var postNode = xmldoc.getElementsByTagName("post");
         for(i = 0; i < postNode.length; i++){

            var postNodeId = postNode[i];

            allPostDivBox = '<div class="status_post_unit">';
            allPostDivBox = allPostDivBox + '<a href="user_view_user_bio.php?getmid=' + postNode[i].getAttribute("poster_mid") + '" rel="facebox[]"><img src="user_pic/'+postNode[i].getAttribute("poster_pix")+'" width="30" height="30" /></a>';
            allPostDivBox = allPostDivBox + '<h3><a href="user_view_user_bio.php?getmid=' + postNode[i].getAttribute("poster_mid") + '" rel="facebox[]">' + postNode[i].getAttribute("poster_name") + '</a></h3>';                  
            allPostDivBox = allPostDivBox + '<div><span>' + postNode[i].getAttribute("poster_acctype") + '</span> | <em>' + postNode[i].getAttribute("post_time") + '</em></div>';
            allPostDivBox = allPostDivBox + '<div>' + postNode[i].getAttribute("post_msg") + '</div>';

            if(postNode[i].getAttribute("post_img") != 'no_img'){
               allPostDivBox = allPostDivBox + '<span><a href="user_view_image.php?post&amp;imid=' + postNode[i].getAttribute("post_id") + '" rel="facebox[]"><img src="img_upload/' + postNode[i].getAttribute("post_img") + '" width="100" height="60" /></a></span>';    
            }

            allPostDivBox = allPostDivBox + '<div class="clear"></div>';

            var getPostId = postNode[i].getAttribute("post_id");

            allPostDivBox = allPostDivBox + '<div class="show_comment_formbox"><form id="formPostComment" onSubmit="return blockCommentSubmit();"><input type="text" id="post_comment' + getPostId + '" name="post_comment' + getPostId + '" maxlength="150" /><input class="comment_btn" type="button" name="comment_submit" value="Post Comment" onClick="javascript:sendCommentFunc();" /> <input type="hidden" id="commenter_mid" name="commenter_mid" value="1" /> <input type="hidden" id="get_post_id' + getPostId + '" name="get_post_id" value="' + getPostId + '" /> <div class="clear"></div></form></div>';

            // START: All comments for post
            allPostDivBox = allPostDivBox + '<div class="status_post_comment_area">';

            var commentNode = postNodeId.getElementsByTagName("comment");
            for(n = 0; n < commentNode.length; n++){
               allPostDivBox = allPostDivBox + '<div class="status_post_comment_unit">';
               allPostDivBox = allPostDivBox + '<div><strong><a href="user_view_user_bio.php?getmid=' + commentNode[n].getAttribute("com_mid") + '" rel="facebox[]">' + commentNode[n].getAttribute("com_name") + '</a></strong></div>';    
               allPostDivBox = allPostDivBox + '<div><span>' + commentNode[n].getAttribute("com_acctype") + '</span> | <em>' + commentNode[n].getAttribute("com_time") + '</em></div>';
               allPostDivBox = allPostDivBox + '<div>' + commentNode[n].getAttribute("com_msg") + '</div>';
               allPostDivBox = allPostDivBox + '</div>';
            }

            allPostDivBox = allPostDivBox + '</div>';
            // END: All comments for post

            allPostDivBox = allPostDivBox + '</div>'

            post_holder_div.innerHTML += allPostDivBox;
         }              

         mTimer = setTimeout('getStatusPostFunc();',30000); //Refresh our post area in 30 seconds           
      }
   }
}

Javascript函数，用于获取和发送当前提交的评论：

//Add a comment to the server
function sendCommentFunc() {
   if(document.getElementById('post_comment').value == '') {
   alert("You have not typed or entered a comment");
   return;
}

var comment = document.getElementById('post_comment').value;
var post_id =  document.getElementById('get_post_id').value;
var commenter_mid =  document.getElementById('commenter_mid').value;

var postDataString = 'comment=' + comment + '&post_id=' + post_id + '&commenter_mid=' + commenter_mid;

$.ajax({
   type: "POST",
   url:'inc/status_post_processor.php?send_comment',
   data: postCommentDataString,

   success: function(data){
      document.getElementById('post_comment').value = '';
      // Refresh oour page after sending comment to the server  
      getStatusPostFunc();
   }
});

}

在此约2天，我只是被困住了。非常感谢获得帮助。

Answer 1

将帖子ID存储在带有数据属性的评论按钮上。

'<input ... name="comment_submit" data-id="' + getPostId + '"
  onclick="sendCommentFunc(this)" />'

this将是输入按钮元素。现在您可以访问该元素而无需id。但您仍然可以使用data-id属性获取帖子ID。

function sendCommentFunc(button) {
    var postId = button.getAttribute("data-id");

    ...
}

修改

在考虑了这一点之后，你甚至不需要data-id。

'<input ... onclick="sendCommentFunc(' + getPostId + ')" />' function sendCommentFunc(id) { var postId = id; ... }

还会在sendCommentFunc中为您提供ID，但您没有对该按钮的引用。

在javascript中获取动态表单元素id

1 个答案: