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

Question

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

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

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

挑战：

1. 获取 formId 以及表单中的 fieldsId（通过：document.getElementById(unknownUniqueId).value），用户尝试通过该表单发表评论并通过 ajax 函数将其发送到php脚本

创建评论表单的行：

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

显示帖子、cmets 以及创建评论表单的完整 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，但您没有对按钮的引用。