получение идентификатора элемента динамической формы в javascript

Question

В приложении пользователи делают сообщение, а также комментируют каждое отправленное сообщение.

Каждое сообщение имеет форму под ним для комментариев, и каждая форма комментария имеет уникальный идентификатор сообщения, добавленного к имени формы, поля в формах.

Я могу получить все сообщения, отправленные на сервер через ajax, но получение значений формы и параметра для отправки каждого комментария, сделанного на каждом сообщении, действительно тяжело.

Задача:

1. Получение FormID, а также fieldsId в форме (через: 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>'; 

T он выполнить 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

Сохраните идентификатор сообщения на кнопке комментария с атрибутом данных.

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

this будет элементом кнопки ввода. Теперь у вас есть доступ к элементу без необходимости его id. Но вы все равно можете получить идентификатор сообщения с атрибутом data-id.

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

    ... 
} 

Edit:

Подумав об этом немного больше, вы даже не нуждаются в data-id.

'<input ... onclick="sendCommentFunc(' + getPostId + ')" />' 

function sendCommentFunc(id) { 
    var postId = id; 
    ... 
} 

также будет вам идентификатор в sendCommentFunc, но у вас нет ссылки на эту кнопку.